jQuery $.animate() multiple elements but only fire callback once

Question

If you select a class or collection of elements to animate with jQuery:

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

And then also use the callback function, you end up with a lot of unneccessary animate() calls.

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

Arguably this is just bad code and / or design - but is there something I can do that both avoids having many animate() calls with only one of them using the callback, and having a load of unneccessary callbacks executing and screwing with my code / expected behaviour?

Ideally I'd just be able to code a single 'disposable' callback that will only run once - otherwise perhaps there is an efficient way to test if something is already being animated by jQuery?

Example: http://jsfiddle.net/uzSE6/ (warning - this will show a load of alert boxes).

Answer 1

You could use when like:

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

http://jsfiddle.net/tyqZq/

Alternate version:

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