jQuery动画在Firefox中是震荡和结巴的 [英] jQuery animations are choppy and stutter in Firefox

问题描述

我喜欢想我不是一个虚拟的，但我不能让我的jQuery水平幻灯片顺利进行动画，特别是在FireFox（在Mac上）。任何人都有建议？

动画是这样做的：

  $（'＃lookbook'）。stop（）。animate（{left： - （（lookbook-1）* 825）+'px'}，{duration：800，complete：cap_fade（1）}） 
  

示例链接：

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

解决方案

我测试过Firefox，Chrome（dev）和Safari以及所有浏览器中的动画片断（但更多的是FF） / p>

为了提高JavaScript性能，您可以删除所有getElementById或$（div＃mydividentyfier）调用。
如果将它们存储在变量中，它们将被缓存。
例如：
这样做可能会提高性能：

  var lookbook = $（ '＃看看书'）; 
 var look_caption = $（'＃look_caption'）; （lookbook.length）{
 lookbook.width（lookbook）.width（）* $（'＃lookbook img'）。length）
 if（look_caption）{
 look_caption.html（lookcaps [0]）; 
 look_caption.fadeIn（）; 
 
 
 
 $ b 
而不是：
 
  $ b < （$（'＃lookbook'）。length）{
 $（'＃lookbook'）。width（$（'＃lookbook'）。width（）* $（'＃lookbook img'）。length）
 if（$（'＃look_caption'））{
 $（'＃look_caption'）。html（lookcaps [0]）; 
 $（'＃look_caption'）。fadeIn（）; 
 
 
 
 
 
 $ b我也建议使用图像的数据URI，因为它减少了httpRequests，你必须要加载页面。
 
I like to think I'm not a dummy, but I can't get my jQuery horizontal slideshow to animate smoothly especially in FireFox (on a Mac). Anyone have advice?

Animation is being done like so:
$('#lookbook').stop().animate({left: -((lookbook-1)*825)+'px'}, { duration: 800, complete: cap_fade(1)});
Example link:

http://mayfourteenth.com/w/lookbook?preview=1
解决方案
I've tested in Firefox, Chrome(dev) and Safari on windows and the animation stutters in all browsers(but more in FF though).

To increase JavaScript performance you could get rid of all the getElementById or $("div#mydividentyfier") calls.
If you store them in variables instead they will be cached.
Example:
It could increase performance quite a bit to do this:
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();
    }
Instead of:
if ($('#lookbook').length) {    
    $('#lookbook').width($('#lookbook').width()*$('#lookbook img').length)
    if ($('#look_caption')) {
        $('#look_caption').html(lookcaps[0]);
        $('#look_caption').fadeIn();
    }
I would also recommend using data URIs for the images as it reduces the amount of httpRequests you have to make to get the page loaded.

                        
这篇关于jQuery动画在Firefox中是震荡和结巴的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！