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

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

You can create a variable to block second+ callback...

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

This will only fire once as every subsequent callback will get canceled :)