examples - jquery animate transform

jQuery $.animate() múltiples elementos pero solo activa la devolución de llamada una vez

Question

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

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

Y luego también usa la función de devolución de llamada, 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 devolución de llamada, y tener una carga de devoluciones innecesarias ejecutando y atornillando con mi código / comportamiento esperado?

Idealmente, solo podría codificar una única devolución de llamada "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).

Answer 1

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

Answer 2

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 devolución de llamada posterior se cancelará :)