jQuery 1.6：backgroundPosition 与 backgroundPositionX 和 FF4 兼容性
在尝试升级 jQuery 插件“iCheckbox”（http://stackoverflow.com/questions/6032538/）以在 jQuery 1.4.4 之上工作时，我发现需要
animate({backgroundPosition:'10px 0px'})
将 的使用更改为
animate({backgroundPositionX: '10px', backgroundPositionY: '0px'})
仅具有一个参数的属性应该使用。到目前为止，这是有道理的，但是等等..虽然它在 Safari 和 Chrome 中工作正常，但它在 FF4 中不起作用（全部在 Mac 上）..
所以我尝试了这个和那个，最后发现如果我将其更改为
animate({backgroundPosition: '10px'})
它可以工作到处！ 但这是怎么回事？现在我只给出一个参数，它可以工作，但我没有指定它是用于 X 轴还是 Y 轴（因此它似乎默认为 X 轴..但如果我希望它在 Y 轴上工作怎么办？）
这似乎很奇怪，我在这里的解决方案不可能是正确的方法..所以我需要一些建议：
发生了什么事？
背景位置应该如何使用 jQuery 1.4 - 1.6 进行动画处理，以便它可以跨浏览器工作？
In an attempt to upgrade the jQuery plugin 'iCheckbox' (http://stackoverflow.com/questions/6032538/) to work above jQuery 1.4.4 I found out that the use of
animate({backgroundPosition:'10px 0px'})
needed to be changed to
animate({backgroundPositionX: '10px', backgroundPositionY: '0px'})
as only properties with one parameter should be used. So far, this makes sense, but wait.. while it's working fine in Safari and Chrome, it's not working in FF4 (all on Mac)..
So i tried this and that and finally found out that if I change it to
animate({backgroundPosition: '10px'})
It works everywhere!
But what's going on here? Now that I just give one parameter, it works, but I'm not specifying if it's for X or Y axis (so it defaults to X axis it seems.. but what if I want it to work on Y axis?)
This seems wierd, and my solutions here can't be the correct way of doing it.. so I need some advice:
What's going on?
How should background position be animated using jQuery 1.4 - 1.6 so that it works across browsers?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
首先，JQuery 无法同时对两个值进行动画处理，因此您会发现为
backgroundPosition输入两个值根本不起作用。另请注意，对于px值，JQuery 文档鼓励您< em>不写px。其次，
backgroundPositionX和backgroundPositionY是非标准 CSS 属性，仅在少数浏览器中受支持，尤其是 IE 和最近的 Webkit，这就是为什么您会发现它在FF或Opera中不起作用。 （参见此处。）我发现混合 JQuery 的
animate< /code> 和 CSS 过渡可以在大多数浏览器中为一个轴上的背景图像设置动画。我将引用我对另一个问题的回答（jQuery.animate background-position）：Firstly, JQuery is unable to animate two values at the same time, thus you saw that inputting two values for
backgroundPositiondid not work at all. Also note that forpxvalues, the JQuery documentation encourages you to not write thepx.Secondly,
backgroundPositionXandbackgroundPositionYare non-standard CSS properties only supported in a few browsers, most notably IE and recently Webkit, which is why you will find it does not work in FF or Opera. (See here.)I have found that mixing JQuery's
animateand CSS transitions works to animate a background image on one axis in most browsers. I will quote from my answer to another question ( jQuery.animate background-position):根据：
http://www.w3schools.com/css/pr_background-position.asp
“如果您只指定一个值，则另一个值将为 50%。您可以混合使用 % 和位置”
According to:
http://www.w3schools.com/css/pr_background-position.asp
"If you only specify one value, the other value will be 50%. You can mix % and positions"