jQuery多个animate()回调

我试图同时动画一组元素(几乎每个动画之间有一个小的延迟):

$('.block').each(function(i){ $(this).stop().delay(60 * i).animate({ 'opacity': 1 }, { duration: 250, complete: mycallbackfunction // <- this fires the callback on each animation :( }); }); 

所有动画完成后如何运行回调函数?

在计数器变量周围使用闭包。

 var $blocks = $('.block'); var count = $blocks.length; $blocks.each(function(i){ $(this).stop().delay(60 * i).animate({ 'opacity': 1 }, { duration: 250, complete: function() { if (--count == 0) { // All animations are done here! mycallbackfunction(); } } }); }); 

请注意,将项列表保存到$ block变量中以保存查找。

从jQuery 1.5开始,你可以使用$.when [docs] ,它更容易编写和理解:

 var $blocks = $('.block'); $blocks.each(function(i){ $(this).stop().delay(60 * i).animate({ 'opacity': 1 }, { duration: 250 }); }); $.when($blocks).then(mycallbackfunction); 

DEMO

Felix Kling的回答将在没有动画的情况下触发回调。 即使动画通过$el.stop() 停止并因此未完成到最后,这也会使回调触发。

我找到了Elf Sternberg使用延迟对象的方法,我在这个jsfiddle中实现了:

http://jsfiddle.net/8v6nZ/

  var block = $('.block'); block.each(function(i){ $(this).stop().delay(60 * i).animate({ 'opacity': 1 }, { duration: 250, complete: i== (block.length-1) ? myCallbackFunction : function(){} }); }); 
 $('.block').each(function(i){ $(this).stop().delay(60 * i).animate({ 'opacity': 1 }, { duration: 250, complete: ((i == $('.block').length - 1) ? mycallbackfunction : null) }); });