将 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");
        });
    });
});

目标是从边缘上方向下滑动“下一个”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

animate 功能正在运行，但您无法看到它，因为您已将其隐藏在 $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