在循環中加載許多JQuery動畫，但阻止任何開始，直到循環停止

我有代碼，其中我動畫了許多跨度，使他們的總寬度是一個div的100％。問題在於jQuery在循環的每次迭代中開始動畫，這決定了特定跨度將會持續多長時間。例如：在循環中加載許多JQuery動畫，但阻止任何開始，直到循環停止

for (var i = 0; i < spans.length; i++) { // could be 500+ 
    $(spans[i]).animate({ 
     width: SOME_NUMBER 
     }, { 
     duration: ANIMATION_DURATION 
     }); 
    } 
}

我遇到的問題是，如果跨度1得到的寬度，說50％，總格，就會開始擴大至寬度其他跨度開始收縮前顯著。最終結果是大部分動畫的總寬度大於100％，並且由於它們並不全都適合，所以這些跨度的總體覆蓋範圍很大。即使我將動畫設置爲線性而非緩動，也會發生這種情況。但是，一旦動畫結束，它們都會完全停止在我想要的位置。

我的問題是：

A）是否有強迫沒有動畫的開始，直到循環已經結束，然後的方式開始他們都在完全相同的時間？

B）有沒有其他方法可以確保總寬度在任何時候都不會> 100％？

下面是一個小提琴證明什麼，我希望它看起來像，但是，與數百跨度，它不會動畫速度不夠快，這個樣子了：

https://jsfiddle.net/wu7o6z37/

來源

2017-08-01 David

循環不是異步的，所以在同一時間的所有動畫開始。可能更多是性能問題或緩解問題。但是，你可能會更好地使用CSS動畫而不是jQuery。換句話說，在CSS和jQuery'.css（'width'，SOME_NUMBER）'中使用'transition：width .5s'。 –

謝謝，我現在就試試 – David

那解決了這個問題，謝謝！如果你把它作爲答案發布，我可以接受它 – David

循環不異步，所以所有的動畫在同一時間開始。這更多的是性能問題或緩解問題。你應該使用CSS動畫而不是jQuery。這樣，它會更流暢。

換句話說，使用transition: width .5s在CSS和.css('width', SOME_NUMBER)

來源

2017-08-01 19:14:48

在循環中加載許多JQuery動畫，但阻止任何開始，直到循環停止

回答

相關問題