0

在尝试升级 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 对背景位置进行动画处理，以便它可以跨浏览器工作？

4

2 回答 2

1

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

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

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

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

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

于 2011-11-17T22:45:37.757 回答
0

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

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

于 2011-06-12T14:17:18.580 回答