jQuery $.animate() de plusieurs éléments, mais seulement le feu de rappel une fois

Question

Si vous sélectionnez une classe ou d'un ensemble d'éléments à animer avec jQuery:

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

Et puis également utiliser la fonction de rappel, vous avez jusqu'à la fin avec beaucoup de unneccessary animate() des appels.

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

On peut dire que c'est juste un mauvais code et / ou de la conception, mais il ya quelque chose que je peux faire qui évite ainsi d'avoir beaucoup d' animate() des appels avec un seul d'entre eux à l'aide de la fonction de rappel, et ayant une charge inutile rappels de l'exécution et de vissage avec mon code / comportement attendu?

Idéalement, j'aimerais juste être capable de coder un seul "jetable" callback qui sera exécuté qu'une fois, sinon il y a peut être un moyen efficace de tester si quelque chose est déjà en cours d'animation en jQuery?

Exemple: http://jsfiddle.net/uzSE6/ (avertissement: indique une charge de boîtes d'alerte).

Answer 1

Vous pouvez utiliser when comme:

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

http://jsfiddle.net/tyqZq/

Autre version:

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

Answer 2

Vous pouvez créer une variable de bloc de seconde+ rappel...

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

Cela ne fera que le feu une fois que chaque rappel obtiendrez annulé :)