0

1日から9日までアニメーション化するためのより良い解決策を探しています。コードは次のとおりです。

    var div = $("<p id='dd1'>Day 1</p>");
    $('#dd1').transition({
        scale: 2.2
    });
    $("#day").empty().append(div);
    for (var i = 1; i < 10; i++) {
        $('#dd' + i).transition({
            scale: 1.1,
            x: 180
        }, 4000, function () {
            var div = $("<p id='dd'" + (i + 1) + ">Day " + (i + 1) + "</p>");
            $("#day").empty().append(div);
        });
        setTimeout(function () {
            // blah blah
        }, 1000);
    }
4

1 に答える 1

0

この方法を試してください-

問題があります

  • ID の連結、つまり "<p id='dd'" + (i + 1) + ">Day "、次の文字列の先頭にある dd の後の引用符を閉じています。
  • トランジションは非同期です。最初のトランジションの完全なコールバックで次のトランジションを呼び出す必要があります。for ループは 2 番目のトランジションが発生する前に完全に実行されるため、i値は 11 になり、それが表示されます。

JS:

var div = $("<p id='dd1'>Day 1</p>"), i=1;
$('#dd1').transition({
    scale: 2.2
});
$("#day").empty().append(div);

function transit(){ //wrap it in function
    $('#dd' + i).transition({ 
        scale: 1.1,
        x: 180
    }, 4000, function () {
        var div = $("<p id='dd" + (i + 1) + "'>Day " + (i + 1) + "</p>");
        $("#day").empty().append(div);
        if(i <= 10){ //once complete check if you want to animate more if so call that again
            setTimeout(function(){
                transit(i++);
            },0);

        }
    });
}
transit(); //invoke to startup.

デモ

于 2013-10-11T18:40:40.950 に答える