jQuery 示例（在 jsfiddle 中）在 firefox 中工作，但在 IE8、7 中不起作用

此时脚本失败，因为您传递的 CSS 值无效：

element.animate({
          backgroundPosition: animStep + " 0px" /* evaluates to "+=50px 0px" */
 }, speed, animate);

好的，我们再来一次:D

http://jsfiddle.net/c7rKV/1/

同样与原始相同，但在 IE 中再次只是对 backgroundPositionX 进行动画处理。

很抱歉上次没有真正看 FF/Chrome。

此外：这当然不是很优雅，Adam Prax 对问题所在的看法是绝对正确的。我只是想发布一个解决方案。

根据 jQuery 的说法，这是因为，如文档页面上所述：animate

所有动画属性都应为单个数值（除非另有说明 下）;属性 非数字不能使用 基本的jQuery功能...。

所以，事实上，在Firefox中，你使用的是未定义的行为。正确的做法是在backgroundPositionX上制作动画，但是Firefox不支持此功能。

但是，有一个jQuery插件可以做你想做的事：

http://plugins.jquery.com/project/backgroundPosition-Effect

更新

仔细检查，该插件不支持或格式化。+=-=

我把它破解成这个例子：

http://jsfiddle.net/CxqSs/（请参阅底部的新示例。

肯定可以使用一些清理，并且可能应该添加到该插件中，但它适用于两种浏览器，并且不依赖于未定义的行为。

顺便说一句，我不知道它是否值得注意，但如果你让这个动画长时间运行，它最终会溢出值并中断。这可以通过对背景图像的全长进行动画处理，然后在下一次动画之前在回调中将偏移量重置为 0px 来克服。这也将避免需要格式。+=

另外，

应该注意的是，和是等价的。speed: 1, step: 1speed: 50, step: 50

它们看起来速度不同的原因是因为

1. 速度为 1（实际上是一毫秒的持续时间）会有更多的开销，因为 animate 被调用的频率更高。

2. 默认的缓动是“摆动”，这意味着动画在整个过程中会略微加速和减慢，这意味着整体速度会受到一些影响。您应该将滚动大小写的缓动更改为“线性”：

   var animate = function() {
       element.animate({
           ...
       }, speed, "linear", animate);            
   };
   

这意味着你可以使用backgroundPosition-Effect插件，没有'+='，将你的步长设置为2247（图像的宽度），就像我上面所说的那样。

这最终将我们带到了......等待它...

http://jsfiddle.net/zyQj3/20/

跨平台、非笨拙、非溢出、正确缓和、缺乏额外参数的解决方案。

如果你检查jQuery的源代码，你会看到它使用这个正则表达式来解析参数（在你的例子中是）。因此，它会将其视为（增加）（到五十）（单位，附加在数字之后）。当尝试读取当前值时，jQuery 使用 parseFloat，它只抓取字符串开头的数字。因此，它完美地工作，即使多维属性可能不是jQuery程序员所想到的。+=50px 0px+=50px 0px

除了 IE8 不支持获取 的当前值。有，但没有.咄。因此，最好的办法是检查浏览器类型，并根据该类型进行动画处理：http://jsfiddle.net/22UWW/background-positionbackground-position-xbackground-position-ybackground-positionbackground-positionbackground-position-x

（实际上有一个关于这个问题的jQuery错误报告，有一个更优雅的解决方案。