jquery animate background-position firefox

Obtuve este deslizador de imagen de fondo funcionando en Chrome y Safari, pero no hace nada en Firefox. ¿alguna ayuda?

$(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; } }); 

También probé esto pero tampoco hace nada

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

aquí prueba esto para la animación de fondo

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

Llámalo así,

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

La versión anterior no funciona con jQuery 1.6.1. Este lo hace

 (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(/center/g,'50%'); 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.end); fx.end = [end[0],end[2]]; fx.unit = [end[1],end[3]]; fx.bgPosReady = true; } 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); 

El código publicado por magiconair ya no funciona con jQuery 1.8. Aquí hay una versión parchada que no usa el método $ .curCSS () depreciado .

 (function($) { if(!document.defaultView || !document.defaultView.getComputedStyle){ var oldCSS = jQuery.css; jQuery.css = function(elem, name, force){ if(name === 'background-position'){ name = 'backgroundPosition'; } if(name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){ return oldCSS.apply(this, arguments); } var style = elem.style; if ( !force && style && style[ name ] ){ return style[ name ]; } return oldCSS(elem, 'backgroundPositionX', force) +' '+ oldCSS(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 = $.css(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.end); fx.end = [end[0],end[2]]; fx.unit = [end[1],end[3]]; fx.bgPosReady = true; } 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); 

Este código funciona bien para mí con jQuery 1.8.1 y Firefox, tuve algunos problemas para conseguir que funcione el ejemplo de Prydie:

http://nelsonwells.net/2012/08/using-bgpos-js-with-jquery-18/

 /** * @author Alexander Farkas * v. 1.02 * * Edited by Nelson Wells for jQuery 1.8 compatibility */ (function($) { $.extend($.fx.step,{ backgroundPosition: function(fx) { if (fx.pos === 0 && typeof fx.end == 'string') { var start = $.css(fx.elem,'backgroundPosition'); start = toArray(start); fx.start = [start[0],start[2]]; var end = toArray(fx.end); fx.end = [end[0],end[2]]; fx.unit = [end[1],end[3]]; } 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]; 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]]; } } }); })(jQuery); 

Aquí una actualización de la solución de Prydie (para jQuery 1.80 y superior).

Maneja el caso de los valores “+ =” y “- =”:

 $.fx.step.backgroundPosition = function(fx) { if (!fx.bgPosReady) { var start = toArray($.css(fx.elem,'backgroundPosition') || '0px 0px'); fx.start = [start[0],start[2]]; var add = [ (ret = /([+-])=/.exec( fx.end.split(' ')[0] )) && ret[1], (ret = /([+-])=/.exec( fx.end.split(' ')[1] )) && ret[1] ]; var end = toArray(fx.end.replace(/([+-])=/g,'')); fx.end = [ add[0]?eval(start[0]+add[0]+end[0]):end[0], add[1]?eval(start[1]+add[1]+end[2]):end[2] ]; fx.unit = [end[1],end[3]]; fx.bgPosReady = true; } fx.now = [ ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0], ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1] ]; fx.elem.style.backgroundPosition = fx.now[0]+' '+fx.now[1]; }; 

Nota: debe usar los otros métodos de la solución de Prydie para que funcione.

muestra de uso:

 $(this).animate({backgroundPosition:'bottom -=100'},5000,'linear',function(){});