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

Question

我有代码，我在其中对许多跨度进行动画处理，使它们的总宽度为 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) 有没有办法强制 none 的动画开始直到循环结束，然后同时开始它们？

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

这是一个 fiddle 演示我想要的样子，但是，由于有数百个跨度，它的动画速度不够快，无法再像这样：

https://jsfiddle.net/wu7o6z37/

Answer 1

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

换句话说，在CSS和.css( 'width', SOME_NUMBER )

中使用transition: width .5s

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

Load many JQuery animations in loop, but prevent any from starting until loop stops

jquery

width

bar-chart

jquery-animate