滑块动画不流畅FF12

在最新的Chrome中，我看到动画运行平稳，但在Firefox中，动画看起来非常糟糕。滑块动画不流畅FF12

这是我的源代码，或许真的会导致它加载速度较慢：

jQuery.fn.Slider = function(Options) { 
    var Settings = { 
     Width: 900, 
     Height: 400, 
     Speed: 400 
    } 
    var SliderSettings = $.extend(Settings, Options); 
    var View = $('.slider_view'); 
    var Images = View.children(); 
    var CurrentImage; 
    var LeftButton; 
    var RightButton; 
    var Animation = false; 

    var Controls = $(this).append('<div class="controls"></div>'); 

    var NumOfImages = Images.size(); 

    if (NumOfImages > 1) { 
     Controls.append('<div class="slider_leftBtn"></div><div class="slider_rightBtn"></div>'); 
     LeftButton = $('.slider_leftBtn'); 
     RightButton = $('.slider_rightBtn'); 
     LeftButton.hide(); 
     CurrentImage = 0; 
    } 

    $(RightButton).click(function() { 
     if (!Animation) { 
      Animation = true; 
      View.animate({ 'left': (parseInt(View.css('left')) - SliderSettings.Width) + 'px' }, SliderSettings.Speed, function() { Animation = false; }); 
      LeftButton.fadeIn(); 
      if (++CurrentImage + 1 == NumOfImages) 
       RightButton.fadeOut(); 
     } 
    }); 

    $(LeftButton).click(function() { 
     if (!Animation) { 
      Animation = true; 
      View.animate({ 'left': (parseInt(View.css('left')) + SliderSettings.Width) + 'px' }, SliderSettings.Speed, function() { Animation = false; }); 
      RightButton.fadeIn(); 
      if (--CurrentImage == 0) 
       LeftButton.fadeOut(); 
     } 
    }); 
};

有没有在我的代码的任何行动，可能会导致FF动画呀？

这是我写的一个小滑块，没什么特别的。

UPDATE：

下设置使FF运行缓慢：

box-shadow: 0px 0px 60px 20px #000;

如何我仍然认为影响？

来源

2012-05-08 Novak

就是这样。 Chrome总是吹嘘JavaScript在浏览器中的执行速度，并且正确如此。在Chrome和Firefox中尝试http://html5bookmarks.com。使窗户变得更瘦更宽，并观看模块在页面上移动。你会注意到相同的区别 – lbstr

您可以尝试使用-moz-transform：translate（x，y）它的硬件加速。

来源

2012-05-08 17:32:16 5566

滑块动画不流畅FF12

回答

相关问题