3

我有几种情况需要为元素设置动画，比如将其向左移动或淡入，但仅在初始动画 100% 完成之后。

比如，假设我有一个搜索抽屉，当您单击搜索图标时，它会从页面顶部滑出。这很简单：

$('.search-toggle').on('click', function(){
   $('.search-drawer').slideToggle(); // or fadeIn(), show() ect..
});

但是如果喜欢，我点击页面底部的搜索切换，我需要在显示搜索抽屉之前将页面向上滚动到顶部？我试过这样的事情：

$('.search-toggle').on('click', function(){
   $('html, body').animate({ scrollTop: 0 }, "slow").find('.search-drawer').slideToggle(); // or fadeIn(), show() ect..
});

但两个动画同时运行。我尝试过使用延迟，但这似乎不起作用，并且当点击顶部链接而不是底部链接时，可能会导致明显的延迟。

也就是说，我也在尝试运行一个动画，当你点击一个元素时，我希望它向左移动 330px，然后，在它到达那个位置之后，另一个元素会滑入或者我会有第二个元素首先滑入，然后第一个元素会做一些事情。关键是，我如何在开始另一个动画之前完成动画。

所以对于我的第二个例子，我看到动画回调并没有真正起作用。我有另一个动画：

 $first.animate( {
     left : "-=660"
    }, 
    300, 
    function(){
      $second.animate({ left: '-='+startPosition });
    }
 }

所以在这个例子中，理论上第一个 $first 会向左移动 660 像素，然后 $second 会向左移动 X 个像素？它没有，它们看起来像同时移动。或者更确切地说，$second 在 $first 之前开始动画。

4

1 回答 1

5

您需要更改您的功能，使其等待第一个动画完成：

$('.search-toggle').on('click', function(){
    $("body").animate({ scrollTop: 0 }, "slow", function(){
        $('.search-drawer').slideToggle(); // or fadeIn(), show() ect..
    });
});
于 2013-08-08T18:11:34.933 回答