jquery在firefox中设置背景位置动画

我在Firefox上有一个动画问题。问题的第二个答案是解决它，但只针对一个狭窄的动画。我希望在每个轴上都像这样应用缓和（在IE和Chrome中工作）：

这里定义了正反两种情况：

$j.easing.sin = function(p, n, firstNum, diff) {
    return Math.sin(p * Math.PI / 2) * diff + firstNum;
};
$j.easing.cos = function(p, n, firstNum, diff) {
    return firstNum + diff - Math.cos(p * Math.PI / 2) * diff;
};

对于Firefox，我需要打电话

 $j("#labyrinth").animate({
    backgroundPosition: (position.x + 350) + ' ' + (position.y + 350)
}, speed);

---

但随后我放松了放松功能。所以，我的问题是，如何让它在FF中工作，并为每个轴提供缓和功能？

我已经破解了它。它适用于sin和cos函数，但您也可以添加自己的函数。 动画的名称如下：

if ($.browser;.mozilla) {
    $("#labyrinth").animate({
        backgroundPosition: (position.x + 350) + ' ' + (position.y + 350) + ' sin cos'
    }, 3000);
}

同时也要考虑的动画代码是：

(function($) {
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){
    var easingX = strg.split(' ')[2];
    var easingY = strg.split(' ')[3];

    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)/);

    var result = [];
    if (easingX === undefined && easingY === undefined) {
        result = [parseFloat(res[1],10), res[2], parseFloat(res[3],10), res[4]];
        return result;
    }

    result = [parseFloat(res[1],10), res[2], parseFloat(res[3],10), res[4], easingX, easingY.replace(')', '')];
    return result;
}

// easing functions I need
function sin(p) {
    return Math.sin(p * Math.PI / 2);
}
function cos(p) {
    return 1 - Math.cos(p * Math.PI / 2);
}

$.fx.step.backgroundPosition = function(fx) {
    if (!fx.bgPosReady) {
        var start = $.curCSS(fx.elem,'backgroundPosition');

        start = toArray(start);
        fx.start = [start[0],start[2]];

        var end = toArray(fx.end);
        fx.end = [end[0],end[2]];

        // those easings are in fx.end
        fx.easingX = end[4];
        fx.easingY = end[5];

        fx.unit = [end[1],end[3]];
        fx.bgPosReady = true;
    }

    var posX = fx.pos;
    var posY = fx.pos;

    if (fx.easingX !== undefined && fx.easingY !== undefined) {
        if (fx.easingX === 'sin') {
            posX = sin(fx.pos);
        } else if (fx.easingX === 'cos') {
            posX = cos(fx.pos);
        }
        if (fx.easingY === 'sin') {
            posY = sin(fx.pos);
        } else if (fx.easingY === 'cos') {
            posY = cos(fx.pos);
        }
    }

    var x = ((fx.end[0] - fx.start[0]) * posX) + fx.start[0] + fx.unit[0];
    var y = ((fx.end[1] - fx.start[1]) * posY) + fx.start[1] + fx.unit[1];

    fx.elem.style.backgroundPosition = x +' '+ y;
};
})(jQuery);

我只是稍微修改了一下，感谢用户

(function($) {
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){
    var easingX = strg.split(' ')[2];
    var easingY = strg.split(' ')[3];

    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)/);

    var result = [];
    if (easingX === undefined && easingY === undefined) {
        result = [parseFloat(res[1],10), res[2], parseFloat(res[3],10), res[4]];
        return result;
    }

    result = [parseFloat(res[1],10), res[2], parseFloat(res[3],10), res[4], easingX, easingY.replace(')', '')];
    return result;
}

// easing functions I need
function sin(p) {
    return Math.sin(p * Math.PI / 2);
}
function cos(p) {
    return 1 - Math.cos(p * Math.PI / 2);
}

$.fx.step.backgroundPosition = function(fx) {
    if (!fx.bgPosReady) {
        var start = $.curCSS(fx.elem,'backgroundPosition');

        start = toArray(start);
        fx.start = [start[0],start[2]];

        var end = toArray(fx.end);
        fx.end = [end[0],end[2]];

        // those easings are in fx.end
        fx.easingX = end[4];
        fx.easingY = end[5];

        fx.unit = [end[1],end[3]];
        fx.bgPosReady = true;
    }

    var posX = fx.pos;
    var posY = fx.pos;

    if (fx.easingX !== undefined && fx.easingY !== undefined) {
        if (fx.easingX === 'sin') {
            posX = sin(fx.pos);
        } else if (fx.easingX === 'cos') {
            posX = cos(fx.pos);
        }
        if (fx.easingY === 'sin') {
            posY = sin(fx.pos);
        } else if (fx.easingY === 'cos') {
            posY = cos(fx.pos);
        }
    }

    var x = ((fx.end[0] - fx.start[0]) * posX) + fx.start[0] + fx.unit[0];
    var y = ((fx.end[1] - fx.start[1]) * posY) + fx.start[1] + fx.unit[1];

    fx.elem.style.backgroundPosition = x +' '+ y;
};
})(jQuery);