Ever have the problem where you want to fade out a whole collection of stuff, and then show only one? A naive implementation looks like this:

$('.options .option').fadeOut('fast', function() {
    $('.options .option:eq(4)').fadeIn('fast')});

If you have five options, however, the callback gets called five times. Now, this is okay in the current example: fadeIn is idempotent, meaning that it doesn't do any harm to call it multiple times as the target object is already faded in after the first; the rest result in no-ops. But what if you need to ensure that the callback gets called only once? What if you have multiple distinct animations that you need to ensure are complete before triggering the next set? Use an aggregated promise. To the best of my knowledge, jQuery.animate() still returns the jQuery root object and not a promise, but we can work around that, like so:

var promises = $('.options .option').map(function() {
    var dfd = $.Deferred();
    $(this).fadeOut('fast', dfd.resolve);
    return dfd.promise();

$.when.apply(null, promises).then(function() {
    $(".options .option:eq(" + target + ")").fadeIn('fast');

Here, we return an array of promises, the resolution of each of which will be called when the fade out of each particular DOM object is done. when() all the promises are delivered, then the fadeIn is triggered. The call to get() at the end of the map() ensures that when() gets an array of promises, not an array of jQuery objects wrapping promises, which wouldn't make sense.

This technique can be used to synchronize any multiple animations and ensure that all of them finish before proceeding to a new animation.