Como esperar que uma animação jquery termine antes que a próxima comece?

Question

May 24, 2011, 10:41 PM

jquery callback javascript animation sequential

Como esperar que uma animação jquery termine antes que a próxima comece?

Tenho o seguinte jQuery:

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300 );
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);

Meu problema é que ambos acontecem ao mesmo tempo. Gostaria que a animação div2 iniciasse quando a primeira terminar. Eu tentei o método abaixo, mas faz o mesmo:

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, ShowDiv() );
....
function ShowDiv(){
   $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
}

Como posso esperar que o primeiro termine?