jQuery示例（在jsfiddle中）在firefox中工作，但在IE8中工作，7
为什么这个例子不适用于IE http://jsfiddle.net/8RZVt/
我在IE8中收到此错误。
Message: Invalid argument. Line: 156 Char: 295 Code: 0 URI: http://code.jquery.com/jquery-1.4.4.min.js 根据jQuery，这是因为，如animate文档页面所述：
所有动画属性都应该是单个数值 （除非如下所述）; 使用基本的jQueryfunction无法动画非数字属性….
事实上，在Firefox中，您使用的是未定义的行为。 正确的做法是在backgroundPositionX上制作动画，但Firefox不支持此function。
但是，有一个jQuery插件可以满足您的需求：
http://plugins.jquery.com/project/backgroundPosition-Effect
更新
仔细观察，该插件不支持+=或-=格式。
我把它砍成了这个例子：
http://jsfiddle.net/CxqSs/ （见底部的新例子。）
肯定可以使用一些清理，并且可能应该添加到该插件，但它可以在两个浏览器中工作，并且不依赖于未定义的行为。
顺便说一句，我不知道是否值得注意，但如果你让这个动画长时间运行，它最终会溢出值并中断。 这可以通过动画背景图像的全长来克服，然后在下一个动画之前将回放中的偏移重置为0px。 这也可以避免需要+=格式。
还有 ，
应该注意的是， speed: 1, step: 1和speed: 50, step: 50是等效的。
他们看起来速度不同的原因是因为
- 速度为1（实际上是毫秒持续时间）的开销更大，因为更频繁地调用animate。
-
默认的缓动是“摆动”，这意味着动画在整个过程中加速并略微减慢，这意味着整体速度会受到一些影响。 你应该为你的滚动案例将缓动更改为“线性”：
var animate = function() { element.animate({ ... }, speed, "linear", animate); };
这意味着您可以使用backgroundPosition-Effect插件，而不使用’+ =’，将步骤设置为2247（图像的宽度），就像我上面所说的那样。
这终于让我们……等待它……
跨平台，非kludgy，非溢出，正确缓和，额外参数缺乏，解决方案。
此脚本失败，因为您传递的CSS值无效：
element.animate({ backgroundPosition: animStep + " 0px" /* evaluates to "+=50px 0px" */ }, speed, animate);
好的，我们再来一次：D
再次与原始相同，然而再次只是在IE中动画backgroundPositionX。
抱歉上次没有真正关注FF / Chrome。
另外：这当然不是很优雅，而且Adam Prax对于问题是绝对正确的。 我只想发布一个解决方案。
如果你检查jQuery的源代码，你会看到它使用这个regexp来解析参数（在你的情况下是+=50px 0px ）。 因此它会将其视为+= （增加） 50 （至50） px 0px （单位，在数字后追加）。 当尝试读取当前值时， jQuery使用parseFloat ，它只是抓取字符串开头的数字。 所以它的工作完美，即使多维属性可能不是jQuery程序员想到的。
除了IE8不支持获取background-position的当前值。 有background-position-x和background-position-y但没有background-position 。 咄。 因此，最好的办法是检查浏览器类型，并根据具体情况background-position-x background-position或background-position-x动画： http ： //jsfiddle.net/22UWW/
（实际上有一个jQuery错误报告 ，有一个更优雅的解决方案 。）