为啥我不能为超过 jquery 1.4.4 的 backgroundPosition 设置动画？

Posted 2023-05-08

【中文标题】为啥我不能为超过 jquery 1.4.4 的 backgroundPosition 设置动画？

【英文标题】：Why can't I animate backgroundPosition past jquery 1.4.4?为什么我不能为超过 jquery 1.4.4 的 backgroundPosition 设置动画？

【发布时间】：2012-01-29 14:52:27

【问题描述】：

我看到 here 在 jquery 1.5.0 中缺少 backgroundPosition 动画是一个已知错误。还没修好？

查看此jsfiddle，在 jquery 1.4.4 中使用 backgroundPosition 进行动画处理，然后查看此 one，发现即使在 jquery 1.7.1 中它也无法正常工作。

知道他们什么时候会解决这个问题吗？

我想知道，因为我刚刚在我的 Chrome 控制台中看到一条警告说：

event.layerX 和 event.layerY 在 WebKit 中被破坏和弃用。 它们将在不久的将来从引擎中移除。

我担心我会继续使用 jquery 1.4.4 来制作动画功能，但 Chrome 会在下一次更新中拉出该功能。

更新

接受的答案，使用 background-position-x 和 y 的想法不适用于 Firefox。现在我将不得不回到 1.4.4，直到找到更好的解决方案。

【参考方案1】：

您需要分别指定background-position-x 和-y，如下所示：

$('div').animate(
  'background-position-x': '-6000px', 'background-position-y': '-200px' , 4000);

Working example. (jQuery 1.7.1)

附带说明，由于您的 background-position-y 没有改变，您可以简单地省略额外的行并更改您的 -x。

【讨论】：

当然！乐意效劳。顺便说一句，你做了很棒的研究。打赌你在踢自己。 :p

原来这与 Firefox 不兼容。我正在使用 8.0.1。有什么建议吗？

是的，与 FireFox 不兼容，这是我的问题。

【参考方案2】：

我在这里遇到了同样的问题："puff of smoke" effect javascript sprite animation

似乎 jQuery 1.4.4 以上的新版本启用了平滑的背景滚动效果，但代价是破坏了实际上依赖于视觉持久性的生涩的精灵动画。我会说 animate 函数不是为此而设计的，但它当时只是工作（TM）。

为了制作背景位置精灵动画，我使用 setTimeout 编写了一个函数

http://jsfiddle.net/Y7Ek4/22/

它更底层，但根本没有更多的代码。