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

时间:2010-05-24 13:22:01

标签: jquery animation callback

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

例如:

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

3 个答案:

答案 0 :(得分:4)

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

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

答案 1 :(得分:2)

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

  

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

要解决此限制,您可以:

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

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

答案 2 :(得分:0)

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