jQuery 1.6：backgroundPosition与backgroundPositionX和FF​​4的兼容性

试图升级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动画背景位置，以便它可以在浏览器中运行？

Answer 1

首先，JQuery无法同时为两个值设置动画，因此您看到为backgroundPosition输入两个值根本不起作用。 另请注意，对于px值， JQuery文档鼓励您不要编写px 。

其次， backgroundPositionX和backgroundPositionY是仅在少数浏览器中支持的非标准 CSS属性，最明显的是IE和最近的Webkit，这就是为什么你会发现它在FF或Opera中不起作用的原因。 （ 见这里 。）

我发现混合JQuery的animate和CSS过渡可以在大多数浏览器中为一个轴上的背景图像设置动画。 我将引用我对另一个问题（ jQuery.animate background-position ）的回答 ：

对于IE，分别使用JQuery的.animate()和backgroundPositionX和Y （这将与最新的JQuery一起使用）。 然后在支持CSS转换的浏览器中（除了IE之外的几乎所有内容），使用.css()而不是.animate()来更改背景位置并在样式表中设置CSS转换。

您将使用上述内容覆盖大多数浏览器，但它可能与仅使用插件不兼容。 在这里看到它： http ： //jsfiddle.net/lucylou/dVpjh/

Answer 2

根据： http ： //www.w3schools.com/css/pr_background-position.asp

“如果你只指定一个值，另一个值将是50％。你可以混合％和位置”