0

私は非常に特定の問題を抱えています、私はグーグルで何を探すべきかさえ知りません...私はアニメーションの手紙を作成しようとしています。ペンと5本の線が別々のタグにあり、すべて1つのコンテナ要素内にあり、比較的配置され、独自のIDを持っています。線は非表示になっています（すべて、表示される場所にあります）。アニメーションは次のようになります。ペンが斜めに移動し、線が表示され、ペンが新しい行の先頭に移動し、5回繰り返し、ペンがデフォルトの位置に戻り、線が消えます。5サイクルすべてのアニメーションコードを個別に記述したくなかったので、forサイクルを使用してアニメーションをキューに挿入しました。最も愚かなことを除いて、すべてが正常に機能しています-現在の行番号を表示できません。コードは次のとおりです。

var penAnimating = false;

function animateLetter() {
    var pen = $('#form_decor_pen');
    var startRight = pen.css('right');
    var startTop = pen.css('top');

    if (!penAnimating) {
        penAnimating = true;

        for (var i=1; i<=5; i++) {
            pen.animate( {
                right: '-=26',
                top: '-=10',
            },{ 
                duration: 600,
                queue: 'penAnimation'
            });

ここに問題の部分があります：

pen.queue('penAnimation', function(next) {          
    //var line = $('#form_header_decor :nth-child(' + i.toString() + ')')
    var line = $('#line_' + i.toString())
    line.show();
    //alert(line.id);
    next(); 
})

問題は、私は常に5（サイクルが終了する数）を出力することです。

            if (i<5) {
                pen.animate({
                    right: '+=26',
                    top: '+=20',
                   },{
                    duration: 300,
                    queue: 'penAnimation'
                });
            } else {
                pen.animate({
                    right: startRight,
                    top: startTop,
                   },{
                    duration: 300,
                    queue: 'penAnimation',
                    complete: function() {
                        penAnimating = false;
                    }
                });
            }​
         }
       pen.dequeue('penAnimation');
    }
}
4

1 に答える 1

0

非同期呼び出しを含む for ループがある場合、for 変数の値は最後の値になります。コードをクロージャーに入れない限り。

for ループを for-loop-with-a-closure に変更します。

    for (var i=1; i<=5; i++) { 
    (function(i){
    // the second i is now in a closure.
    })(i);
    }
于 2012-08-30T17:51:00.360 に答える