Powiedzmy, że mam trzy divy i chciałbym, aby każdy z nich był animowany, gdy poprzedni jest ukończony. Obecnie piszę to:

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

Co jest brzydkie, ale łatwe do opanowania.

Teraz wyobraź sobie, że mam 10 różnych animacji, które muszą się zdarzyć jeden po drugimna różne elementy. Nagle kod staje się tak nieznośny, że bardzo trudno jest zarządzać ...

Oto pseudokod tego, co chcę zrobić:

<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>

Jak to osiągnąć?