背景jQuery中的位置动画无法在Firefox中运行
我在这里工作： http ： //www.benjaminpotter.org/portfolio2/
看看加载启动，它看起来很好，但不是在Firefox中。 你知道为什么在jquery中制作动画的背景位置在Firefox中不起作用吗？ 看看附在它上面的脚本叫做animate吧。
正如dzejkej所指出的，背景位置的单独值不是标准的一部分，并且不受Firefox支持。 正如jQuery animate()页面所述 ：
应将所有动画属性设置为单个数值
这意味着background-position不合格，因为它需要两个值，x pos和y pos。
您将不得不使用动画插件。 不幸的是，目前jQuery插件网站已关闭，所以我在这里提供了一个适用于Firefox的版本：
/** jquery.bgpos.js * @author Alexander Farkas * v. 1.02 */ (function($) { $.extend($.fx.step,{ backgroundPosition: function(fx) { if (fx.state === 0 && typeof fx.end == 'string') { 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]]; 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);
请参阅此页面以获取有关其使用的参考。
background-position-x是非标准的CSS属性，Firefox不支持它。
看到：
我让我的工作更好，更简单的解决方案
首先安装jquery迁移
https://github.com/jquery/jquery-migrate/#readme
$ .browser属性允许您定位要将样式应用到的浏览器
在这种情况下，background-position可以更改为属性支持的backgroundPosition
可用的标志是 – webkit
– safari – opera – msie（对于IE） – mozilla
IE或Firefox的示例
if ( $.browser.msie || $.browser.mozilla) { $(".element").css('backgroundPosition', position + "px 0"); }
用于镀铬
if ( $.browser.webkit) { $(".element").css('backgroundPosition', position + "px 0"); }