Digamos que tengo tres divs, y me gustaría que se animen cada una una vez que termine la anterior. Actualmente, escribo esto:

<code>$('div1').fadeOut('slow', function() {
    $('div2').fadeOut('slow', function() {
        $('div3').fadeOut('slow');
    });
});
</code>

Lo cual es feo, pero manejable.

Ahora imagina que tengo 10 animaciones diferentes que deben suceder una tras otraen diferentes elementos. De repente, el código se vuelve tan torpe que es extremadamente difícil de manejar ...

Aquí está pseudocódigo para lo que estoy buscando hacer:

<code>$('div1').fadeOut('slow' { delay_next_function_until_done: true } );
$('div2').fadeOut('slow' { delay_next_function_until_done: true } );
$('div3').animate({ top: 500 }, 1000 );
</code>

¿Cómo logro esto?