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

Question

为了解释我的问题，我在这里创建了这个http://jsfiddle.net/Jams/XNVB2/我希望在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);

或者，您也可以这样做：http queue: //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();
});

​</p>