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

我有两种情况需要为元素设置动画，比如向左移动或淡入，但只有在初始动画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之前开始制作动画。

您需要更改函数，以便等待第一个动画完成：

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

---

使用动画方法的回调函数，检查文档。修复你帖子中的所有拼写错误…修复！你发帖的时候我正在做！需要努力修复操作错误…；）谢谢，这似乎会导致slideToggle（）触发两次。我的页面将向上滚动，抽屉将打开，但它会立即关闭。这是因为您同时设置了

html

和

body

的动画。我已经更新了我的问题。因此，虽然回调对第一个示例有效，但对第二个示例无效。我编辑了我的问题，加入了一些示例代码。谢谢你们两个！