При анимации, как запустить обратный вызов только тогда, когда все элементы сделаны?

Question

При анимации в jQuery, что является лучшим методом запуска обратного вызова только тогда, когда ВСЕ элементы выполнены анимацией, а не для каждого элемента?

Например:

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

Answer 1

Это может быть фрагмент кода, который можно попробовать:

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

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

Предупреждение - это просто заполнитель конечного обратного вызова, который вам нужно запустить.

РЕДАКТИРОВАТЬ (другой способ):

Вы также можете поймать все элементы, кроме last one.

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

, а затем добавить к нему только fadeOut с обратным вызовом

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

Answer 2

Это отличный вопрос, согласно jQuery docs :

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

Чтобы обойти это ограничение, вы можете:

• Перечислить все элементы, соответствующие .someElements, и установитьотдельный обратный звонок для каждого.
• Имеет переменную count, которая отслеживает общее количество обратных вызовов.
• При обратном вызове уменьшайте значение count, пока оно не достигнет 0.

Когда счет достигнет 0, все обратные вызовы будут завершены, и вам будет гарантировано, что все элементы будут выполнены с анимацией.Отсюда вы можете иметь специальный код в вашем обратном вызове, который делает все, что вам нужно ...

Answer 3

Более поздние выпуски jQuery (версии 1.6 и новее) включают идею обещания . Использование этой функции устраняет необходимость в обходном пути. Например:

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