Question

假设我有几个动画一次运行，并且我希望在完成所有动画后调用它。

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

$(".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>

我的问题是：有更好的方法吗？

Answer 1

查看有关此主题的讨论：jQuery $.animate() multiple elements but only fire callback once

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

Answer 2

您可以为所有这些回调运行相同的回调，但只有当前没有动画再次执行时才执行if子句，如下所示：

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

这只是通过:animated selector检查是否还有动画。如果你动画了许多不同的东西，那么使用相同的概念，只需像这样添加到选择器：

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

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

Answer 3

在我的情况下，我必须定义

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

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

3 个答案: