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）它的硬件加速了。

滑块动画没有运行流畅的FF12

1 个答案: