jquery .animate（）在使用完整索引的循環中：

我正在研究一次運行多個動畫的腳本，並基於何時開始新動畫，當前動畫的其餘元素必須使用.stop （）並轉到另一個地方（這是工作）。所以我創建了一個動畫數組，當添加一個新的動畫時獲取.animate（），當每個動畫完成時，我需要將它從數組中移除。下面是我嘗試使用代碼：jquery .animate（）在使用完整索引的循環中：

for (var i = 0; i < animations[key].length; i++) { 
animations[key][i].object.animate({ 
    top: animations[key][i].endCoords.top, 
    left: animations[key][i].endCoords.left 
}, { 
    duration: 800, 
    complete: function() { 
     console.log(i); 
     animations[key].splice(i, 1); 
     console.log(animations); 
    } 
}); 
}

的問題是完成時：運行時，i設置爲動畫[關鍵]。長度。我很確定我明白爲什麼它會這樣做，因爲for循環在動畫完成之前仍在繼續（這很好，因爲它允許我一次運行多個動畫），但有沒有什麼方法可以編寫代碼當完成時：運行它有正確的索引做拼接？

在此先感謝！

來源

2012-04-22 Jeff

使用/分配每個迭代不同的變量應該做的：

for (var i = animations[key].length-1; i >= 0; i--) { 
    var id = i; 
    animations[key][id].object.animate({ 
     top: animations[key][id].endCoords.top, 
     left: animations[key][id].endCoords.left 
    }, { 
     duration: 800, 
     complete: function() { 
      console.log(id); 
      animations[key].splice(id, 1); 
      console.log(animations); 
     } 
    }); 
}

否則到頭來你會每次調用animations[key].splice(animations[key].length, 1)（因爲循環執行任何動畫有時間來完成之前）。即使如此，您可能需要重新考慮您的方法：除非動畫以完全相同的順序完成，否則您可能仍有麻煩！

編輯：倒環路方向（參見下面的註釋） - 這有開始動畫倒序

來源

2012-04-22 00:44:30 giorgiga

此解決方案的工作副作用時，有數組中只有一個項目，但是當有多個同樣的問題發生，他們最終都具有相同的價值。你會如何推薦我「重新考慮我的方法」？ – Jeff 2012-04-22 01:33:34

哦 - 天哪！如果動畫按順序結束，我最終會調用拼接（0,1） - 它將所有元素向下移動一個索引 - 然後拼接（1,1） - 實際上移除原來具有索引2的元素 - 然後拼接（3,1 ） - 刪除原始元素5 - 等等...迭代應該到另一側（從.length向下）。對不起，以前沒有發現這個 – giorgiga 2012-04-22 02:30:11

至於「方法」的東西，我真的不知道你的意圖是否足夠推薦任何東西......除非你真的需要動畫[關鍵]保持「完整」，直到動畫完成_完成，您可以先將動畫從隊列中彈出，然後運行它們 - 否則可以考慮使用與數組不同的數據結構來實現動畫效果（鏈接列表將允許刪除元素而不會混淆索引 - 地圖/字典可能是更簡單的處理）...它取決於你需要做什麼（除了開始動畫） – giorgiga 2012-04-22 02:35:54

jquery .animate（）在使用完整索引的循環中：

回答

相關問題