jquery - 幻灯片动画在 Firefox 中运行良好，但在 Chrome 中卡顿

Question

我正在构建一个网站，当您单击位于页面左侧、顶部或右侧的另一个 div 的按钮时，中心 div 会被推出屏幕。

左侧、顶部和右侧的 div 将使用 jquery ajax 加载，并使用 css3 进行动画处理。

这是我正在谈论的页面:

http://www.uvm.edu/~areid/homesite/index.html

尝试在 Chrome 和 Firefox 中单击左眼。您会发现动画在 Firefox 中很流畅，但在 chrome 中却有些卡顿。

有人知道为什么会发生这种情况吗？

我还想知道是否有人知道我如何可以加快网站速度/使转换看起来更流畅。

感谢你们提供的任何帮助

最好，

凯蒂

Answer 1

我可以清楚地看到 Chrome 中的抖动。

如果您在浏览器中执行许多其他操作，CSS3 动画不一定能顺利运行。它们运行的​​流畅程度取决于您同时尝试执行的其他操作以及浏览器中的内部实现如何处理这些操作。

根据我使用精美 CSS3 过渡的 CSS3 幻灯片的经验，让它们顺利运行的最佳方法是在您希望动画顺利运行的同时不要对代码执行大量操作。以下是一些可以最大限度地提高顺利运行机会的方法:

1. 预加载动画期间可能需要的资源。
2. 在动画运行时不要启动任何 JavaScript 函数。
3. 避免在动画期间加载图像。
4. 对于您想要在动画之后运行的事物，请通过动画的完成函数触发其操作(以便它们在动画完成后才会启动)。
5. 如果您希望在动画完成时构建并准备好某些内容，请在开始动画之前先构建它，并在开始动画之前将其隐藏并准备好。
6. 请勿在动画期间修改 DOM(动画专门需要的除外)。

更具体地说，在您的页面中，我看到幻灯片过渡出现了急动，但在滑动的同时，我看到浏览器尝试加载幻灯片期间显示的新内容。新内容的加载和显示可能会导致幻灯片过渡的不稳定。我建议您等到幻灯片完成后再开始加载新内容，或者在开始幻灯片之前预加载新内容。我发现有些浏览器在 CSS3 转换中会变得不稳定，即使浏览器只是通过网络加载图像也是如此。