用於循環的交錯效應

我嘗試製作交錯動畫時出現問題。我試過這個動畫元素從數組（「盒子」）與延遲其他每個元素10ms.But它不工作與setTimeout因爲「我」的價值是在超時後添加結束。任何意見如何做到這一點？用於循環的交錯效應

var box=[] 
for (var i = 0; i < document.getElementsByClassName('box').length; i++){box.push(document.getElementsByClassName('box')[i])} 
    for (var i = 0; i < box.length; i++) { 
     setTimeout(function() {box[i].style.transform="translateX(150px)"},i*10) 
    }

任何幫助或建議被apprecaited，謝謝你在前進。

來源

2016-11-15 Matija

答案涉及使用IIFE在i在執行setTimeout的時間原始值鎖定。

var box=[] 
for (var i = 0; i < document.getElementsByClassName('box').length; i++){box.push(document.getElementsByClassName('box')[i])} 
    for (var i = 0; i < box.length; i++) { 
     (function (i) { 
      setTimeout(function() {box[i].style.transform="translateX(150px)"},i*10) 
     }(i)) // This copies the value. 
    }

來源

2016-11-15 14:14:33 Brian

這個移動的所有元素一次，我不知道爲什麼 – Matija

@Matija你試過像'我* 100'一個較大的值，看看它的速度太快了，你在做什麼？ - 我剛想到你在兩個循環中使用了'i'。也許你可以把它換成'j'。 – Brian

是的，我試圖甚至1000，我登錄「我」控制檯，並獲得數字從0到49，有50個元素在框數組 – Matija

可以使此代碼更清潔的是這樣的：

var boxes = document.getElementsByClassName('box'); 

    for (var i = 0; i < boxes.length; i++) { 
     (function (i) { 
      setTimeout(function() {boxes[i].style.transform="translateX(150px)"},i*200) 
     }(i)) // This copies the value. 
    }

你不需要他們推到一個數組訪問它們。

這裏是工作提琴：https://jsfiddle.net/w8wbmozs/52/

來源

2016-11-15 14:13:45

用於循環的交錯效應

回答

相關問題