jQuery的多个动画（）回调

Question

我试图同时动画一组元素（差不多了，还有每个动画之间有一个小的延迟）：

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

如何运行一个回调函数后，所有动画都完成？

Answer 1

围绕计数器变量使用闭包。

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变量中以保存查找。

Answer 2

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

Answer 3

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

Answer 4

因为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

Answer 5

Felix Kling's answer将触发回调时，有没有动画留下来做。如果动画是停止通过$el.stop()，这使回调射击甚至，因此不完成到最后。

我发现了一个method by Elf Sternberg使用延迟的对象，我在这的jsfiddle实施：

http://jsfiddle.net/8v6nZ/