如何在下一个jquery动画开始之前等待一个jquery动画完成？

Question

我有以下jQuery:

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

我的问题是两者都发生在同一时间.我想在第一个完成时启动div2动画.我尝试了下面的方法,但它做了同样的事情:

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

如何让它等待第一个完成？

Answer 1

http://api.jquery.com/animate/

animate具有"完整"功能.您应该将第二个动画放在第一个动画的完整功能中.

编辑:示例http://jsfiddle.net/xgJns/

$("#div1").animate({opacity:.1},1000,function(){
    $("#div2").animate({opacity:.1},1000);    
});?