如何在另一个完全完成后才开始一个jQuery动画

Question

我有几种情况需要为元素设置动画，比如将其向左移动或淡入，但仅在初始动画 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..
});

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

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

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

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

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

Answer 1

你需要改变你的函数，让它等待第一个动画完成：

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