jQuery, вызывающий обратный вызов только один раз после нескольких анимаций - PullRequest
Новая
       7

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

26 голосов
/ 12 марта 2010

Допустим, у меня запущено несколько анимаций одновременно, и я хочу вызвать функцию, как только все они будут завершены.

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

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

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

Ответы [ 3 ]

45 голосов
/ 19 февраля 2012

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

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

29 голосов
/ 12 марта 2010

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

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

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

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

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

3 голосов
/ 04 августа 2010

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

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