jquery animate background position в firefox с функцией ослабления

Question

У меня проблема с анимацией с Firefox. Второй ответ на вопрос jquery animate background-position firefox решает его, но только для узкой анимации. Я хочу, чтобы применить ослабление на каждой оси, как это (который работает в IE и Chrome):

$j("#labyrinth").animate({ 
    'background-position-x': [position.x - 350, 'sin'], 
    'background-position-y': [position.y + 350, 'cos'] 
}, speed); 

грех и потому определены здесь:

$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 с функцией ослабления для каждой оси?

Answer 1

Я взломал его. Он работает для функций 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); 

Я просто взломать его немного, все благодаря идет к пользователю https://stackoverflow.com/users/244749/magiconair