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);

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();
});

</ p>