将 slideDown 更改为动画

Question

我想改变这个slideDown效果：

$(document).ready(function () {
    $('.slide').not("#n1").hide();
    $('.slide').click(function () {
        var $this = $(this);
        var $next = $this.next();
        if (!$next.length) {
            $next = $this.siblings(".slide").first();
        }
        $this.css("z-index","-1"); //make sure $next can slide OVER $this
        $next.slideDown(2000, function () {
            $this.hide().css("z-index","0");
        });
    });
});

此动画效果：

$(document).ready(function () {
    $('.slide').not("#n1").hide();
    $('.slide').click(function () {
        var $this = $(this);
        var $next = $this.next();
        if (!$next.length) {
            $next = $this.siblings(".slide").first();
        }
        $this.css("z-index","-1"); //make sure $next can slide OVER $this
        $next.animate({marginTop: "400px"}, 2000, function () {
            $this.hide().css("z-index","0");
        });
    });
});

目标是将 "next" div 从边距上方向下滑动以覆盖可见的 div。

.slide {height:500px;width:100%;background-color:#f2f2f2;border-bottom:5px solid #f2f2f2;position:absolute;}}

<div id="n1" class="slide" style="display:inline">div one</div>
<div id="n2" class="slide" style="display:block;margin-top:-400px">div two</div>

动画功能根本不起作用。任何人都可以帮助修复它吗？我是否正确使用动画：$next.animate({marginTop: "400px"}, 2000, function () {...

Answer 1

动画功能正在运行，但您看不到它，因为您已将它隐藏在 $next 元素

 $('.slide').not("#n1").hide();

slideDown() 方法正在将元素设置为：

 display="block"

它正在为这个元素设置动画。

为了使用 animate() 实现类似的效果，您必须在动画之前显示 () 您的元素。

此外，我假设您想将 $next div 设置为页面顶部的动画，这样您就可以将 marginTop 值设置为 0:

$next.show().animate({marginTop: 0}, 2000, function () {
      $this.hide().css("z-index","0");
});

工作fiddle

将 slideDown 更改为动画

Change slideDown to Animate

jquery

jquery-animate