Como faço para animar no jQuery sem empilhar callbacks?

Question

Apr 29, 2012, 08:50 AM

html5 jquery-animate jquery jquery-ui jquery-callback

Como faço para animar no jQuery sem empilhar callbacks?

Digamos que eu tenha três divs e gostaria que cada um fosse animado quando o anterior estiver pronto. Atualmente, escrevo isto:

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

Que é feio, mas administrável.

Agora imagine que eu tenho 10 animações diferentes que precisam acontecer um após o outroem diferentes elementos. De repente, o código fica tão desajeitado que é extremamente difícil de gerenciar ...

Aqui está o pseudocódigo para o que eu estou procurando fazer:

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

Como faço para conseguir isso?