jQuery 1.6：backgroundPosition 与 backgroundPositionX 和 FF4 的兼容性

Posted 2023-05-08

【中文标题】jQuery 1.6：backgroundPosition 与 backgroundPositionX 和 FF4 的兼容性

【英文标题】：jQuery 1.6: backgroundPosition vs backgroundPositionX and FF4 compatibility

【发布时间】：2011-09-13 10:06:18

【问题描述】：

在尝试升级 jQuery 插件 'iCheckbox' (http://***.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 对背景位置进行动画处理，以便跨浏览器工作？

【问题讨论】：

如果您喜欢，请快速检查按钮在IE7,8,9中是否有效并在此处滑动并在cmets中回答？测试：jsfiddle.net/mikkelbreum/uHkE5

【参考方案1】：

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

其次，backgroundPositionX 和 backgroundPositionY 是 非标准 CSS 属性仅在少数浏览器中支持，最显着的是 IE 和最近的 Webkit，这就是为什么你会发现它在FF或歌剧。 (See here.)

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

分别使用JQuery的.animate()和backgroundPositionX和Y 对于 IE（这将适用于最新的 JQuery）。然后在浏览器中 support CSS transitions（几乎除了 IE 之外的所有东西），使用 .css() 而不是 .animate() 改变背景位置和设置 样式表中的 CSS 过渡。

以上内容您将涵盖大多数浏览器，但可能不是 AS 仅使用插件兼容。在这里看到它的工作： http://jsfiddle.net/lucylou/dVpjh/

【参考方案2】：

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

"如果只指定一个值，则另一个值为 50%。您可以混合使用 % 和位置"