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中实现了:
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) }); });