如何保持动画之间的时间间隔？

Question

为了解释我的问题，我在div1完成了25％的动画，然后div2应该开始动画，div1完成50 ％动画然后div3应该开始动画。

这是jquery代码

$("#div1").animate({width:400},2000);
$("#div2").animate({width:400},2000);
$("#div3").animate({width:400},2000);

Answer 1

这应该有效：http://jsfiddle.net/XNVB2/1/

$("#div1").animate({
    width: 400
}, 2000);
setTimeout(function () {
    $("#div2").animate({
        width: 400
    }, 2000);
}, 500);
setTimeout(function () {
    $("#div3").animate({
        width: 400
    }, 2000);
}, 1000);

或者，您也可以使用queue：http://jsfiddle.net/XNVB2/2/

执行此操作

var animLength = 2000;
$("#div1").animate({width:400},animLength);
$("#div2").delay(animLength * 0.25).queue(function(n){
    $(this).animate({width:400},animLength);
    n();
});
$("#div3").delay(animLength * 0.5).queue(function(n){
    $(this).animate({width:400},animLength);
    n();
});