在循环中加载许多 JQuery 动画，但在循环停止之前阻止任何动画开始答案

【问题标题】：Load many JQuery animations in loop, but prevent any from starting until loop stops在循环中加载许多 JQuery 动画，但在循环停止之前阻止任何动画开始
【发布时间】：2017-08-01 18:42:11
【问题描述】：

我有代码，其中我为许多跨度设置动画，以使它们的总宽度为 div 的 100%。问题在于 jQuery 在循环的每次迭代中开始动画，这决定了某个跨度的长度。例如：

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

我遇到的问题是，如果跨度 1 的宽度为总 div 的 50%，它会在其他跨度开始缩小之前显着扩大到该宽度。我最终得到的是大部分动画的总宽度 > 100%，以及由于它们不完全适合而对跨度的总环绕。即使我将动画设置为线性而不是缓动也会发生这种情况。然而，一旦动画结束，它们都会在我想要的地方结束。

我的问题是：

A) 有没有办法强制在循环结束之前不启动任何动画，然后在完全相同的时间启动它们？

B) 是否有其他方法可以确保总宽度在任何时间点都不会 > 100%？

这是一个演示我希望它看起来像什么的小提琴，但是，由于有数百个跨度，它的动画速度不够快，无法再看起来像这样：

https://jsfiddle.net/wu7o6z37/

【问题讨论】：

循环不是异步的，所以所有的动画都是同时开始的。可能更多是性能问题或宽松问题。但是，使用 CSS 动画而不是 jquery 可能会更好。换句话说，在 CSS 和 jQuery 中使用 transition: width .5s .css( 'width', SOME_NUMBER )。
谢谢，我现在试试
问题解决了，谢谢！如果您将其发布为答案，我可以接受它

标签： jquery jquery-animate width bar-chart

【解决方案1】：

循环不是异步的，所以所有的动画都是同时开始的。这更多是性能问题或宽松问题。你应该使用 CSS 动画而不是 jQuery。这样，它会更加流畅。

换句话说，在 CSS 中使用 transition: width .5s 和 .css( 'width', SOME_NUMBER )

【讨论】：