jQuery的 - 動畫+顯示（）在隊列中的循環

我有一個非常具體的問題，我甚至不知道在Google中尋找什麼... 我試圖創建一個動畫信。有一支筆和5條線位於一個單獨的標籤中，全部位於一個容器元素中，相對定位，具有自己的ID，線條隱藏（全部位於它們應該出現的位置）。動畫是這樣的：筆對角線移動，出現一條線，筆移動到新線的開頭，重複5次，筆回到默認位置，線條消失。我不想爲所有5個週期單獨編寫動畫代碼，所以我使用for循環將動畫插入到隊列中。一切工作正常，除了最愚蠢的事情 - 我無法得到當前行號顯示。下面的代碼：jQuery的 - 動畫+顯示（）在隊列中的循環

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

來源

2012-08-28 Mariano Grandioso

任何人有什麼想法？看起來好像這個數字在循環後被插入隊列中。但爲什麼？我怎麼克服這個問題？ –

如果您有一個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-30 17:51:00

感謝您指引我朝着正確的方向發展，但我仍然不知道如何正確實施它。你能否指定我應該如何編輯中間部分的代碼才能工作？我嘗試了幾種方法，但無法實現。 –

我得到它的工作。太感謝了。 –

有什麼你需要的嗎？ –

jQuery的 - 動畫+顯示（）在隊列中的循環

回答

相關問題