在jQuery中制作动画时,只有当所有元素都完成动画而不是每个元素时,才会触发回调的最佳做法是什么?
例如:
$('.someElements').fadeOut('fast', function() {
// dont do this until ALL elements are done fading
}
答案 0 :(得分:4)
这可能是一个尝试的片段:
var numberOfElements = $('.someElements').length;
$('.someElements').fadeOut(fast, function() {
if( numberOfElements-- > 0 ) return;
alert('call the Fireman!');
});
警报只是您需要触发的最终回调的占位符。
编辑(另一种方式):
您还可以捕获所有元素,但不能捕获最后元素。
$('.someElements').not(.someElements:last).fadeOut();
然后添加一个仅带回调的fadeOut到它
$('.someElements:last').fadeOut(fast, function (){
// do something, it's the end of the world
};
答案 1 :(得分:2)
这是一个很好的问题,根据jQuery docs:
如果动画了多个元素,请务必注意每个匹配元素执行一次回调,而不是整个动画执行一次。
要解决此限制,您可以:
.someElements
匹配的所有元素,并为每个元素设置单独的回调。 count
变量,用于跟踪有多少回调。 count
直到达到0. 当计数达到0时,所有回调都完成,并且您将确保所有元素都完成动画。从这里开始,您可以在回调中使用特殊代码来执行您需要执行的操作...
答案 2 :(得分:0)
jQuery(1.6及更高版本)的最新版本包括promise的概念。使用此功能无需解决方法。例如:
// define the animation on many elements
$('.someElements').fadeOut('fast');
// define the promise that is called once all element animations are done
$('.someElements').promise().done( function() {
// put callback actions here
});