jQuery，在多个动画后只调用一次回调答案

【问题标题】：jQuery, calling a callback only once after multiple animationsjQuery，在多个动画后只调用一次回调
【发布时间】：2011-01-26 19:09:30
【问题描述】：

假设我有几个动画同时运行，我想在所有动画都完成后调用一个函数。

只有一个动画，很容易；有一个回调。例如：

$(".myclass").fadeOut(slow,mycallback);

问题是，如果我的选择器找到多个项目，将为每个项目调用回调。

解决方法并不难；例如：

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      var $mc=$(".myclass"),l=$mc.length;
      $mc.fadeOut("slow",function(){
        if (! --l) $("#target").append("<p>All done.</p>");
      });
    });
  </script>
  <style type="text/css">
  </style>
</head>
<body>
  <p class="myclass">Paragraph</p>
  <p class="myclass">Paragraph</p>
  <p class="myclass">Paragraph</p>
  <p class="myclass">Paragraph</p>
  <p class="myclass">Paragraph</p>
  <p class="myclass">Paragraph</p>
  <div id="target"></div>
</body>
</html>

我的问题是：有没有更好的方法来做到这一点？

【问题讨论】：

在大多数情况下，我使用布尔值而不是计数器（因此该动作在第一个动画结束时执行），但除此之外它是相同的方法。好问题，我很好奇其他方式。
确实如此。例如，如果您的所有动画长度不同（不像我的简单示例），并且您只想在事物停止移动或在浏览器上淡出之后再做某事，您就想等待所有这些。

标签： jquery jquery-animate

【解决方案1】：

看看这个线程的讨论：jQuery $.animate() multiple elements but only fire callback once

.when()/.then() 和 .promise().done(callback()); 函数为在所有动画结束时调用单个回调的问题提供了更优雅的解决方案。

【讨论】：

好电话。同样，这使用队列在最后一个元素完成动画后触发回调：elements.fadeOut(330).last().queue(function(){ });

【解决方案2】：

您可以为所有它们运行相同的回调，但只有在当前没有动画的情况下才执行 if 子句，如下所示：

  $(".myclass").fadeOut("slow", function() {
    if ($(".myclass:animated").length === 0)
      $("#target").append("<p>All done.</p>");
  });

这只是检查是否仍有通过:animated selector 进行动画处理。如果您要为许多不同的事物设置动画，则使用相同的概念，只需像这样添加到选择器中：

$(".myclass:animated, .myClass2:animated")

如果你在很多地方都使用它，我会将该回调设为 onFinish 函数或其他东西来整理它。

【讨论】：

很好，我喜欢这个决定性的方面。
也遇到了这个问题。巧妙的解决方案。
我已经尝试过了，但是 :animated 选择器在回调被触发时似乎没有被清除。在 .length 之前添加 .not(this) 使其工作。
@grahamparks - 不清楚如果元素上还有另一个动画排队，记住这只是 this 动画的回调，另一个可能在它之后......这个脚本真的是为问题的上下文编写的:)
尼克：其他动画不是问题。在我的测试中，元素在调用它自己的回调时仍然匹配 *:animated。因此长度永远不会是 0。

【解决方案3】：

就我而言，我必须定义

if ($(".myclass:animated").length === 1)

【讨论】：