0

在最新的 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;

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

4

1 回答 1

0

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

于 2012-05-08T17:32:16.563 回答