jquery动画背景位置firefox

我有这个背景图像滑块的东西在chrome和safari中工作，但它在firefox中没有做任何事情。 任何帮助？

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

我也试过这个，但它也什么也没做

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

Answer 1

在这里尝试这个背景动画

 (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' }) 

Answer 2

上面的版本不适用于jQuery 1.6.1。 这一个。

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

Answer 3

magiconair发布的代码不再适用于jQuery 1.8。 这是一个修补版本，不使用折旧的$ .curCSS（）方法 。

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

Answer 4

这段代码适用于jQuery 1.8.1和Firefox，我有一些问题让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); 

Answer 5

这是Prydie解决方案的更新（适用于jQuery 1.80及更高版本）。

它处理“+ =”和“ – =”值的情况：

 $.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]; }; 

注意：您必须使用Prydie解决方案中的其他方法才能使其正常工作。

使用样本：

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