javascript - 如何等待一个 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);    
});​