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/