Firefox 4中的jQuery动画速度（平滑度）

Posted 2023-05-08

【中文标题】Firefox 4中的jQuery动画速度（平滑度）

【英文标题】：jQuery animations speed(smoothness) in firefox 4

【发布时间】：2011-08-20 16:53:07

【问题描述】：

嘿，我已经制作了这个site（请耐心等待，还没有预加载，所以加载可能需要一段时间）在您通过单击右/左浏览图像（全屏）的地方，一切都完成了有隐藏溢出和jquery的animate + scrollLeft，现在主要有两个问题，

该滚动的一般速度和平滑度 左（这应该很快，因为 它没有绝对位置+左）在 几乎所有浏览器，firefox(4) 尤其是 第二个是generall speed jquery 的动画仅在 firefox，当你点击“菜单”时，里面的手风琴速度慢得离谱。

现在我的设计师显然已经用http://svenprim.com/ 激发了自己的灵感，那个家伙的编码方式与我的非常相似，但他的网站非常流畅和快速，我想不出任何原因。

我试过的被删除了 隐藏的内容（“菜单”，和 “概述”）所以只有图像会保留 - 没有帮助 减少图片数量 - 没有帮助

感谢任何帮助/提示，​​我越来越绝望了。

【参考方案1】：

对于任何想知道的人来说，这个问题与 javascript 本身无关，问题在于 .photoBox 有一个 gif 动画作为背景。显然 Firefox 在滚动时不喜欢 gif。

您现在可以检查它是否相当快速和流畅。

http://jankaslphoto.com/

只需要处理那个预加载（并且在 webkits 上以某种方式计算宽度错误）。不管怎样，谢谢你们的帮助，你们俩，我一定会看看那个包装的。

【参考方案2】：

我会尽可能使用 CSS 过渡和变换来为它们设置动画。

查看http://css3.bradshawenterprises.com/sliding/ 以获得一些演示。使用转换意味着它将在 ios 上进行硬件加速，并且不需要重新绘制，因此通常会更快。

我编写了一个快速函数来使用 jQuery animate 作为后备，并在可能的情况下使用转换，请查看 http://css3.bradshawenterprises.com/legacy/ 以了解如何使用它。

它也需要加载 Modernizr，但如果需要，您可以编写自己的转换和变换测试。

【参考方案3】：

我看到您正在使用一些自定义缓动函数。这些计算每个动画步骤的值，因此会对性能产生很大影响。尝试删除缓动函数（或使用“swing” - 默认值），看看这是否会提高您的性能。

我还看到您使用的是缓动函数 js 文件的打包版本 - 现在这被认为是不好的做法，因为浏览器每次都必须解压缩文件 - 即使从缓存加载 - 这也会占用 CPU 周期 - 因为更多信息，请参见 John Resig -> http://ejohn.org/blog/library-loading-speed/ - 更好的方法是使用例如 Google Closure 编译器来缩小 javascript - 我通常只使用我需要的缓动函数并将其放在我的主 js 文件中（许可证允许）。

虽然 CSS3 转换很不错，但并非所有浏览器都支持它们，不幸的是 jQuery 还没有利用它们。

【讨论】：

jQuery（从 1.6 开始）确实利用了 something blog.jquery.com/2011/05/03/jquery-16-released（部分效果）developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame