Firefox 4 中的 jQuery 动画速度（平滑度）
嘿，我已经制作了这个网站（请耐心等待，还没有预加载，所以可能需要一段时间加载），通过单击右/左浏览图像（全屏），这一切都是通过隐藏溢出和jquery的animate+scrollLeft完成的，现在有两个主要问题，
- 一般速度和滚动的平滑度 左（这应该很快，因为 它不是绝对位置+左） 几乎所有浏览器，firefox(4) 尤其
- 第二个是一般速度 jquery 的动画仅 firefox，当你点击“菜单”时，里面的手风琴速度慢得离谱。
现在我的设计师显然已经受到 http://svenprim.com/ 的启发，这家伙编码的方式与我的，但他的网站非常流畅和快速，我想不出任何原因。
- 我尝试过的被删除了 隐藏内容（“菜单”，和 “概述”），所以只有图像会保留 - 没有帮助
- 减少图像数量 - 没有帮助
任何帮助/提示表示赞赏，我感到绝望。
Hey, I've made this site(please be patient, there's no preload yet, so it might take a while to load) where you browse images(that are fullscreen) by clicking right/left, it's all done with hidden overflow and jquery's animate + scrollLeft, now there are two major problems,
- generall speed and smoothness of that scroll
left(this should be fast, as
it's no position absolute + left) in
pretty much all browsers, firefox(4)
especially - the second would be generall speed
of jquery's animations only in
firefox, when you click on "menu", that accordion inside is just ridiculously slow.
now my designer has clearly insipired himself with http://svenprim.com/ the way the guy coded it is quite similar to mine, yet his site is very smooth and fast, and I can't think of any reason why is it.
- What I've tried was deleted the
hidden content("menu", and
"overview") so only images would stay - didn't help - Reduce the number of images - didn't help
Any help/tips appreciated, I'm getting desperate.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
对于任何想知道的人来说，这个问题与 javascript 本身无关，问题是 .photoBox 有 gif 动画作为背景。显然 Firefox 不喜欢滚动时显示 gif。
您可以检查它现在是否相当快且流畅。
http://jankaslphoto.com/
只需要进行预加载（并且在 webkit 上以某种方式计算宽度错误）。不管怎样，谢谢你们的帮助，你们俩，我一定会看一下那个包装。
For anyone wondering, the problem had nothing to do with the javascript itself, the problem was .photoBox having a gif animation as a background. Apparently firefox doesn't like gifs while scrolling.
You can check that it's fairly fast and smooth now.
http://jankaslphoto.com/
Just gotta work on that preload(and on webkits somehow counting width wrong). Either way, thanks for your help, you both, I'll definitely take a look at that packing.
我会尽可能使用 CSS 过渡和变换来为它们设置动画。
看看 http://css3.bradshawenterprises.com/sliding/ 的一些演示。使用变换意味着它将在 iOS 上进行硬件加速，并且不需要重新绘制，因此速度通常会更快。
我编写了一个快速函数来使用 jQuery animate 作为后备，并尽可能使用转换，请查看 http://css3.bradshawenterprises.com/legacy/ 查看如何使用它。
它还需要加载 Modernizr，尽管您可以根据需要编写自己的转换和转换测试。
I would use CSS transitions and transforms to animate them where possible.
Have a look at http://css3.bradshawenterprises.com/sliding/ for a few demos. Using transforms means it will be hardware accelerated on iOS, and doesn't require a repaint, so things are generally quicker.
I've written a quick function to use jQuery animate as a fallback, and to use transforms where possible, take a look at http://css3.bradshawenterprises.com/legacy/ to see how to use it.
It requires Modernizr to be loaded as well, though you could write your own tests for transitions and transforms if needed instead.
我看到您正在使用一些自定义缓动函数。这些计算每个动画步骤的值，因此会对性能产生很大影响。尝试删除缓动函数（或使用“swing” - 默认值），看看这是否会提高您的性能。
我还看到您正在使用缓动函数 js 文件的打包版本 - 如今这被认为是不好的做法，因为浏览器每次都必须解压文件 - 即使从缓存加载 - 这也会占用 CPU 周期 - 有关更多信息，请参阅约翰·雷西格在这里 -> http://ejohn.org/blog/library-loading-speed/ - A更好的方法是使用例如 Google Closure 编译器来缩小 javascript - 我通常只使用我需要的缓动函数并将其放置在我的主 js 文件中（许可允许）。
尽管 CSS3 转换很好，但并非所有浏览器都支持它们，而且不幸的是 jQuery 还没有利用它们。
I see you are using some custom easing functions. These calculate values on each animation step nd so can have a great impact on performance. Try removing the easing functions (or use 'swing' - the default) and see if this improves your performance.
I also see you are using a packed version of the easing functions js file - this is considered bad practise these days as the browser has to unpack the file everytime - even when loading from cache - this also eats into CPU cycles - for more info see John Resig here -> http://ejohn.org/blog/library-loading-speed/ - A better approach would be to minify the javascript using eg Google Closure compiler - I usually just use the easing function I require and place it in my main js file (licence permitting).
Although CSS3 transforms are nice, they are not supported in all browser and unfortunately jQuery doesn't take advantage of them (yet).