在Firefox中，jQuery动画不稳定且断断续续

我喜欢认为我不是假人，但我不能让我的jQuery水平幻灯片放映动画，特别是在FireFox（在Mac上）。 有人有建议吗？

动画正在这样做：

$('#lookbook').stop().animate({left: -((lookbook-1)*825)+'px'}, { duration: 800, complete: cap_fade(1)}); 

示例链接：

http://mayfourteenth.com/w/lookbook?preview=1

Answer 1

我已经在Windows上测试了Firefox，Chrome（dev）和Safari以及所有浏览器中的动画口吃（但在FF中更多）。

要提高JavaScript性能，您可以删除所有getElementById或$（“div #mydividentyfier”）调用。 如果将它们存储在变量中，则会缓存它们。 示例：执行此操作可能会提高性能：

 var lookbook = $('#lookbook'); var look_caption = $('#look_caption'); if (lookbook.length) { lookbook.width(lookbook).width()*$('#lookbook img').length) if (look_caption) { look_caption.html(lookcaps[0]); look_caption.fadeIn(); } 

代替：

 if ($('#lookbook').length) { $('#lookbook').width($('#lookbook').width()*$('#lookbook img').length) if ($('#look_caption')) { $('#look_caption').html(lookcaps[0]); $('#look_caption').fadeIn(); } 

我还建议为图像使用数据URI，因为它减少了为加载页面而必须进行的httpRequests数量。

Answer 2

Chrome中的动画看起来很流畅。 但是，我相信您可以采取一些措施来提高平滑度：

首先，可以像在此处一样预先加载所有图像（在顶部）。 但是，在“示例链接”中一次显示它们会对性能造成伤害，因为它们都会立即生成动画：

 
 
 
 ... 
  

您可以简单地定位当前图像两侧的下一个和上一个图像，但在需要之前不要在页面中保留其余图像，而不是这样做。 （预加载它们仍然很好。）

其他可以稍微改善性能的事情如下：

1. 使用较小的（按像素和/或文件大小）图像。
2. 通过提前计算事物来进行次要代码优化。
3. 使用独立的动画库而不是jQuery。

Answer 3

您可能还想使用它

 .animate({left:'-=825'}); //next //and .animate({left:'+=825'}); //previous 

代替

 .animate({left: -((lookbook-1)*825)+'px'});