Question

正如您所看到的，有2个带有“subbanner”类的div容器。只要添加第三个，第四个或更多，动画就会变得非常奇怪。

你可以在JS中取出第64和65行，然后它将顺利运行：

      opacity: 1, // if you take these
      height: "110px" // out, it will work

任何人都可以看到这个原因吗？

我知道动画可以在没有所有回调的情况下排队，但是如果你这样做，那么一旦你最小化/最大化浏览器或者你去一个不同的标签一段时间，动画将全部不同步。

编辑：我删除了大部分代码，以便更轻松。

http://jsfiddle.net/cwfgvbzh/3/

正如你所看到的（我希望）动画在每2秒钟动画300毫秒时会有不同的延迟。

这是资源问题（处理器，内存？）或我的代码中是否有错误？

Answer 1

问题是对.animate()的多次调用正在构建一个队列。只有两个容器，动画周期快速结束，队列快速清除，所以你没有注意到任何问题。

然而，随着更多元素动画，你有更长的动画周期，而你的setInterval()会保持动画效果，所以你最终会得到多个并行队列，所有这些队列都试图在不同的时间点为相同的元素设置动画。

问题的一个解决方案是在代码的每个.stop()之前调用.animate()。这将在开始新元素之前停止元素上的任何动画，从而阻止队列。但是，正如this文章所指出的那样，这也会阻止动画完成它的完整周期。

因此，最好的方法是仅在元素不再动画时才开始新动画。正如文章中指出的那样，使用.filter(':not(:animated)').animate()，你不再需要担心队列。

以下是该方法的更新小提琴：http://jsfiddle.net/c89potv0/

PS：我注意到的一件事是，如果你改变浏览器上的标签并在一段时间后回来，那么动画将再次表现出来。这可能是因为浏览器如何处理每个选项卡上的javascript线程。但由于代码现在仅仅在非动画元素上应用动画，因此动画将在几秒钟后自行修复。