JQuery, вызывающий обратный вызов только один раз после нескольких анимаций

Скажем, что у меня сразу несколько анимаций, и я хочу вызвать функцию, когда все они закончены.

Только с одной анимацией это легко; там обратный вызов для этого. Например:

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

Мой вопрос: есть ли лучший способ сделать это?

Ответы

Ответ 1

Вы можете выполнить один и тот же обратный вызов для всех из них, но только выполните предложение if, если в настоящее время ни один из них не анимируется, например:

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

Это просто проверяет, все ли еще анимированы с помощью селектора :animated. Если вы анимали много разных вещей, используйте ту же концепцию, просто добавьте в селектор, как это:

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

Если вы используете его во многих местах, я бы сделал этот обратный вызов функцией onFinish или чем-то, чтобы его убрать.

Ответ 2

Посмотрите на обсуждение этой темы: jQuery $.animate() несколько элементов, но только огонь обратного вызова один раз

Функции .when()/.then() и .promise().done(callback()); предоставляют гораздо более элегантное решение проблемы вызова одного calllback в конце всех анимаций.

Ответ 3

В моем случае я должен определить

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