动画时，如何仅在所有元素完成后触发回调？答案

【问题标题】：When animating, how fire the callback only when all elements are done?动画时，如何仅在所有元素完成后触发回调？
【发布时间】：2010-05-24 13:22:01
【问题描述】：

在 jQuery 中制作动画时，仅当所有元素都完成动画而不是每个元素都完成动画时触发回调的最佳做法是什么？

例如：

$('.someElements').fadeOut('fast', function() {
  // dont do this until ALL elements are done fading
}

【问题讨论】：

我对你的问题感到困惑吗？所有这些元素都应该同时完成它们的动画。他们都有“快速”的持续时间，所以他们都在同一时间完成。
你想只触发回调一次吗？
Tejs：正如 Justin 在下面提到的，将为集合中的每个元素触发一个回调。 Felix，是的，我只想触发一次回调。决定在下面使用 microspino 的答案。

标签： jquery animation callback

【解决方案1】：

这可能是一个尝试的 sn-p：

var numberOfElements = $('.someElements').length;

$('.someElements').fadeOut(fast, function() {
  if( numberOfElements-- > 0 ) return;
  alert('call the Fireman!'); 
});

警报只是您需要触发的结束回调的占位符。

编辑（另一种方式）：

您还可以捕获所有元素，但不能捕获最后一个。

$('.someElements').not(.someElements:last).fadeOut();

然后添加一个只带有回调的淡出到它

$('.someElements:last').fadeOut(fast, function (){ 
   // do something, it's the end of the world
};

【讨论】：

太棒了！但是，要使比较变为真，条件应该是 (--numberOfElements > 0) 对吧？在比较之前减小变量。
-- 是 LeftHandSideExp 运算符。表达式首先减少，然后评估比较。假设您在最后一个循环中：您有 1 个元素，表达式是这样的： 1-- > 0 ？错误，不要返回，转到下一行并触发警报调用。
为此，条件应为 (--numberOfElements > 0)
这些答案已过时。从 jQuery 1.6 开始，最好的方法是使用 .promise() 和 .done()。

【解决方案2】：

这是一个很好的问题，根据jQuery docs：

如果为多个元素设置动画，请务必注意，每个匹配的元素都会执行一次回调，而不是对整个动画执行一次。

要解决此限制，您可以：

枚举所有匹配.someElements的元素，并为每个元素设置一个单独的回调。
有一个count 变量来跟踪总共有多少回调。
在您的回调中，递减 count 直到它达到 0。

当 count 达到 0 时，所有回调都已完成，您将保证所有元素都已完成动画。从这里，您可以在回调中添加特殊代码来执行您需要执行的任何操作...

【讨论】：

谢谢贾斯汀！如果您只想让回调触发一次，这似乎有点复杂，但是当您也需要为每个动画发生某些事情时，这非常有用。不过，对于这个更简单的情况，我会选择 microspino 的答案。

【解决方案3】：

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

【讨论】：