jquery - 滑块动画运行不流畅 FF12

Question

在最新的 chrome 中，我看到动画运行流畅，但在 Firefox 中，动画看起来非常糟糕。

这是我的源代码，可能是某些原因导致它加载较慢：

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 以这种方式制作动画？

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

更新：

下一个设置会导致 FF 运行缓慢：

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

我怎样才能保持这种效果？

Answer 1

您可以尝试使用 -moz-transform:translate(x,y) 它是硬件加速的。