Jquery - defer callback until multiple animations are complete

Question

I need a callback to execute once after multiple elements have finished animating. My jquery selector is as follows:

$(\'.buttons\').fadeIn(\'fast\',function         


        

Answer 1

The idea behind my solution is to keep a counter. Whenever an animation finishes, you simply increment this counter, thus you can see when you are at last button. Remember to set the counter back to zero when everything is done, because you might want to repeat this (hide them again, and show them again).

var $buttons=$('.buttons'),
    button_n=$buttons.length,
    button_counter=0;
$buttons.fadeIn('fast', function () {
    if (button_counter==button_n-1) {
        alert('It is all done!');
        button_counter=0;
    } else {
        button_counter++;
    }
});