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对背景位置进行动画处理，以使其在浏览器中正常工作？     

解决方法

        首先，JQuery无法同时设置两个值的动画，因此您看到为

backgroundPosition

输入两个值根本不起作用。另请注意，对于

px

值，JQuery文档鼓励您不要编写the4ѭ。 其次，

backgroundPositionX

和

backgroundPositionY

是非标准CSS属性，仅在少数浏览器中受支持，最著名的是IE和最近的Webkit，这就是为什么您会发现它在FF或Opera中不起作用的原因。 （看这里。） 我发现在大多数浏览器中，混合使用JQuery的

animate

和CSS过渡可以使一个轴上的背景图像动起来。我将引用另一个问题的答案（jQuery.animate background-position）：   分别使用JQuery的

.animate()

和

backgroundPositionX

和

Y

  IE（适用于最新的JQuery）。然后在浏览器中   支持CSS转换（除了IE之外几乎所有其他功能），使用   用

.css()

代替

.animate()

更改背景位置并进行设置   样式表中的CSS过渡。      以上内容将涵盖大多数浏览器，但可能不适用   就像使用插件一样兼容。在这里查看工作：   http://jsfiddle.net/lucylou/dVpjh/     ,        根据： http://www.w3schools.com/css/pr_background-position.asp \“如果仅指定一个值，则另一个值将为50％。可以混合％和位置\”