Question

在jQuery中制作动画时，只有当所有元素都完成动画而不是每个元素时，才会触发回调的最佳做法是什么？

例如：

$('.someElements').fadeOut('fast', function() {
  // dont do this until ALL elements are done fading
}

Answer 1

这可能是一个尝试的片段：

var numberOfElements = $('.someElements').length;

$('.someElements').fadeOut(fast, function() {
  if( numberOfElements-- > 0 ) return;
  alert('call the Fireman!'); 
});

警报只是您需要触发的最终回调的占位符。

编辑（另一种方式）：

您还可以捕获所有元素，但不能捕获最后元素。

$('.someElements').not(.someElements:last).fadeOut();

然后添加一个仅带回调的fadeOut到它

$('.someElements:last').fadeOut(fast, function (){ 
   // do something, it's the end of the world
};

Answer 2

这是一个很好的问题，根据jQuery docs：

如果动画了多个元素，请务必注意每个匹配元素执行一次回调，而不是整个动画执行一次。

要解决此限制，您可以：

枚举与.someElements匹配的所有元素，并为每个元素设置单独的回调。
有一个count变量，用于跟踪有多少回调。
在您的回调中，递减count直到达到0.

当计数达到0时，所有回调都完成，并且您将确保所有元素都完成动画。从这里开始，您可以在回调中使用特殊代码来执行您需要执行的操作...

Answer 3

jQuery（1.6及更高版本）的最新版本包括promise的概念。使用此功能无需解决方法。例如：

// define the animation on many elements
$('.someElements').fadeOut('fast');

// define the promise that is called once all element animations are done
$('.someElements').promise().done( function() {
    // put callback actions here
});

动画时，只有当所有元素都完成时才会触发回调？

3 个答案: