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

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

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

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

 $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..
    });
});

如何在另一个完全完成后启动一个jQuery动画

1 个答案: