2012-05-08 3 views
0

最新のクロムではアニメーションが滑らかに見えますが、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; 

どのように私はまだその効果を維持することができますか?

+0

これはまさにそれです。 Chromeは、javascriptがブラウザでどのくらい速く実行されているか、正当な理由で自慢しています。 chromeとfirefoxでhttp://html5bookmarks.comを試してみてください。ウィンドウのスキンを広げ、モジュールがページの周りを移動するのを見ます。あなたは同じ違いに気付くでしょう – lbstr

答えて

0

-moz-transformを使用してみることができます。translate(x、y) ハードウェアアクセラレーテッドです。

関連する問題