Synchronous animations in jQuery, not using callbacks?

Question

I can't use callbacks because I have a scenario like this (pseudo-code):

$('.box').on('click', function() {
    $('.expanded-box').animate({
        // shrink it
    });

    $(this).animate({
        // grow it
        $(this).addClass('expanded-box');
    });
});

I can't put the expansion animation within the callback for the expanded-box growth animation because it may not always happen. But I need the second animation to wait till the previous one is done. How can I do this?

Answer 1

Since jQuery 1.6, you can use promise() to obtain a Promise object that will be resolved when all animations on a given element have completed. In addition, the documentation says:

Using .promise() on a collection with no active animation returns a resolved Promise.

Therefore, it's well-suited to your use case, and you can write:

$('.box').on('click', function() {
    var $this = $(this);
    $('.expanded-box').animate({
        // shrink it
    }).promise().done(function() {
        $this.animate({
            // grow it
        }).addClass('expanded-box');
    });
});