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

Если вы выбираете класс или коллекцию элементов для анимации с помощью jQuery:

$('.myElems').animate({....});

И затем также используйте функцию обратного вызова, вы получите много ненужных вызовов animate().

var i=1;
$('.myElems').animate({width:'200px'}, 200, function(){
    //do something else
    $('#someOtherElem').animate({opacity:'1'}, 300, function(){        
        if (i>1) console.log('the '+i+'-th waste of resources just finished wasting your resources');
        i++;
    });
});

Возможно, это просто плохой код и/или дизайн, но есть ли что-то, что я могу сделать, что позволяет избежать множества вызовов animate() только с одним из них, используя обратный вызов, и с загрузкой ненужных обратных вызовов, выполняющих и зависящих с мой код/ожидаемое поведение?

В идеале я бы просто смог написать один "одноразовый" обратный вызов, который будет запускаться только один раз - иначе, возможно, есть эффективный способ проверить, что что-то уже анимируется jQuery?

Пример: http://jsfiddle.net/uzSE6/ (предупреждение - это покажет загрузку предупреждающих ящиков).

Ответ 1

Вы можете использовать when, например:

$.when($('.myElems').animate({width: 200}, 200)).then(function () {
  console.log('foo');
});

http://jsfiddle.net/tyqZq/

Альтернативная версия:

$('.myElems').animate({width: 200}, 200).promise().done(function () {
  console.log('foo');
});

Ответ 2

Вы можете создать переменную для блокировки второго + обратного вызова...

var i=1;
$('.myElems').animate({width:'200px'}, 200, function(){
    //do something else
    $('#someOtherElem').animate({opacity:'1'}, 300, function(){        
        if (i>1) return;
        else
        {
            console.log('the '+i+'-th waste of resources just finished wasting your resources');
            i++;
        }
    });
});

Это будет срабатывать только один раз, когда каждый последующий ответ будет отменен:)