jQuery $ .animate () несколько элементов, но вызов только один раз - PullRequest
Новая
       48

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

40 голосов
/ 09 января 2012

Если вы выбираете класс или коллекцию элементов для анимации с помощью 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() вызовов только с одним из них, использующих обратный вызов, и иметь массу ненужных обратных вызовов, выполняющихи мне не нравиться мой код / ​​ожидаемое поведение?

В идеале я бы просто мог закодировать один «одноразовый» обратный вызов, который будет выполняться только один раз - в противном случае, возможно, существует эффективный способ проверить, что-то уже происходит.animated by jQuery?

Пример: http://jsfiddle.net/uzSE6/ (предупреждение - будет отображено множество ящиков с предупреждениями).

Ответы [ 2 ]

104 голосов
/ 09 января 2012

Вы можете использовать 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 голосов
/ 09 января 2012

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

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

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

...