播放動畫另一個

後，我想要做的是在一個循環中一個又一個玩動畫與jQuery播放動畫另一個

for(i = 0; i < 25; i ++){ 
    $('#'+animations[i]).animate({...}, 1500); 
}

的問題是，我不希望使用動畫功能，因爲裏面的回調我有X動畫運行，我不能「硬編碼」論文。 Javascript沒有「等待」功能。 delay（）函數也不理想。

過程：動畫1正在運行，然後finnished，然後動畫2運行，finnished然後動畫3等...但我有一個動態數組動畫。

setTimeout方法是一個大問題，因爲Javascript執行setTimeout並繼續他的執行。

for(i = 0; i < 25; i ++){ 
    setTimeout(function(){ $('#'+animations[i]).animate({...}, 1500); }, timer); 
}

變種i的值將是25，因爲每次等待時間來執行的匿名函數，在循環finnished ..

來源

2017-09-28 sql_newbie_developper

爲了使的「i」的變化，則必須以包裹setTimeout函數成IIFE，像這樣的值： '爲（I = 0; I <25;我++）{ （setTimeout的（函數（j）{$（'＃'+ animations [j]）。animate（{...}，1500）;}，timer））（i）; }' – Mateusz

加入@Mateusz的評論，而不是使用IIFE，你可以使用['let']聲明'i'（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /發言/讓） –

你可以使用遞歸函數調用，並再次調用一次動畫已完成，像這樣

function animate(start, end) { 
 
    (function rec() { 
 
    if (start <= end) 
 
     $('#'+animations[start++]).animate({top:100}, 1500, rec); 
 
    })(); 
 
} 
 

 
/* setup */ 
 
var animations = Array(25).fill(0).map((_,i) => i); 
 
animations.forEach(x => { $('<span />',{id:x}).appendTo('body') }); 
 
/* function call */ 
 
animate(0, 25);

span { 
 
    position: relative; 
 
    top: 0; 
 
    height: 10px; 
 
    width: 10px; 
 
    background : red; 
 
    display:inline-block 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

來源

2017-09-28 08:56:07 adeneo

謝謝你，它的作品就像一個魅力！ –

如果你不希望使用出於某種原因回調，您可以使用您i和時間相乘，因此您的代碼將是：

for(i = 0; i < 25; i ++){ 
    setTimeout(function(){ $('#'+animations[i]).animate({...}, 1500); }, i*1500); 
}

這種方式，你都會一次創建超時，但他們將不得不延遲設置爲0，1500 ，3000,4500等等。

來源

2017-09-28 08:59:19 Walk

這不會工作，因爲你修改的時間是持續時間，而不是延遲;） –

@MaartenBicknese編輯我的答案，這種方式它應該工作。 – Walk

這應該有效。 –

播放動畫另一個

回答

相關問題