jQuery $ .animate () múltiples elementos pero solo activa la callback una vez

Si selecciona una clase o colección de elementos para animar con jQuery:

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

Y luego también usa la función de callback, terminas con muchas llamadas innecesarias 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++; }); }); 

Podría decirse que esto es solo código y / o diseño incorrectos, pero ¿hay algo que pueda hacer que evite tener muchas llamadas animate() con una de ellas usando la callback, y tener una carga de devoluciones innecesarias ejecutando y atornillando con mi código / comportamiento esperado?

Idealmente, solo podría codificar una única callback “desechable” que solo se ejecutará una vez; de lo contrario, tal vez haya una manera eficiente de probar si algo ya está siendo animado por jQuery.

Ejemplo: http://jsfiddle.net/uzSE6/ (advertencia: esto mostrará una carga de cuadros de alerta).

    Podrías usar when como:

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

    http://jsfiddle.net/tyqZq/

    Versión alternativa:

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

    Puede crear una variable para bloquear el segundo + retorno de llamada …

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

    Esto solo se disparará una vez, ya que cada callback posterior se cancelará 🙂