jQuery 多个 animate() 回调

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

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

演示

Answer 3

Felix Kling 的回答将当没有动画可做时触发回调。如果动画通过 $el.stop() 停止，从而未完成到最后，这会使回调甚至触发。

我找到了 Elf Sternberg 的方法< /a> 使用我在此 jsfiddle 中实现的延迟对象：

http://jsfiddle.net/8v6nZ/

Answer 4

   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 5

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