jQuery的动画背景位置Firefox [英] jquery animate background-position firefox

问题描述

我在chrome和safari中使用了背景图片滑块，但在Firefox中却没有任何作用.有帮助吗?

I got this background image slider thing working in chrome and safari, but it doesnt do anything in firefox. any help?

$(function(){
    var image= ".main-content";
    var button_left= "#button_left";
    var button_right= "#button_right";
    var animation= "easeOutQuint";
    var time= 800;
    var jump= 800;
    var action= 0;

    $(button_left).click(function(){
        right();
    });
    $(button_right).click(function(){
        left();
    });
    $(document).keydown(function(event){
        if(event.keyCode == '37'){
            right();
        }
    });
    $(document).keydown(function(event){
        if(event.keyCode == '39'){
            left();
        }
    });
    function left(){
        if(action == 0){
            action= 1;
            $(image).animate({backgroundPositionX: '-='+jump+'px'}, {duration: time, easing: animation});
            setTimeout(anim, time);
        }

    }
    function right(){
        if(action == 0){
            action= 1;
            $(image).animate({backgroundPositionX: '+='+jump+'px'}, {duration: time, easing: animation});
            setTimeout(anim, time);
        }
    }
    function anim(){
        action= 0;
    }
}); 

我也尝试过，但是它什么也没做

I also tried this but it also does nothing

$(image).animate({backgroundPosition: '500px 0px'}, 800);

推荐答案

在此尝试进行背景动画

(function($) {
    if (!document.defaultView || !document.defaultView.getComputedStyle) {
        var oldCurCSS = jQuery.curCSS;
        jQuery.curCSS = function(elem, name, force) {
            if (name === 'background-position') {
                name = 'backgroundPosition';
            }
            if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) {
                return oldCurCSS.apply(this, arguments);
            }
            var style = elem.style;
            if (!force && style && style[name]) {
                return style[name];
            }
            return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force);
        };
    }
    var oldAnim = $.fn.animate;
    $.fn.animate = function(prop) {
        if ('background-position' in prop) {
            prop.backgroundPosition = prop['background-position'];
            delete prop['background-position'];
        }
        if ('backgroundPosition' in prop) {
            prop.backgroundPosition = '(' + prop.backgroundPosition;
        }
        return oldAnim.apply(this, arguments);
    };

    function toArray(strg) {
        strg = strg.replace(/left|top/g, '0px');
        strg = strg.replace(/right|bottom/g, '100%');
        strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");
        var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
        return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]];
    }
    $.fx.step.backgroundPosition = function(fx) {
        if (!fx.bgPosReady) {
            var start = $.curCSS(fx.elem, 'backgroundPosition');

            if (!start) { //FF2 no inline-style fallback
                start = '0px 0px';
            }
            start = toArray(start);
            fx.start = [start[0], start[2]];
            var end = toArray(fx.options.curAnim.backgroundPosition);
            fx.end = [end[0], end[2]];
            fx.unit = [end[1], end[3]];
            fx.bgPosReady = true;
        }
        //return;
        var nowPosX = [];
        nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
        nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
        fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1];
    };
})(jQuery);

像这样打电话给它

$(this).animate({
    backgroundPosition: '0 0'
})

这篇关于jQuery的动画背景位置Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！