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

这个Animate效果：

$(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>

animate功能根本不起作用。有人可以帮忙解决吗？我是否正确使用动画：$ 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

将slideDown更改为Animate

1 个答案: