为什么这个例子在 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
【问题讨论】：
标签： javascript jquery css xhtml cross-browser
根据 jQuery，这是因为，正如 animate 文档页面所述：
所有动画属性都应该是 单个数值（除非另有说明 以下）;属性是 非数字不能使用动画 基本的 jQuery 功能....
因此，事实上，在 Firefox 中您使用的是未定义的行为。正确的做法是在 backgroundPositionX 上设置动画，但是 Firefox 不支持。
不过，有一个 jQuery 插件可以满足您的需求：
http://plugins.jquery.com/project/backgroundPosition-Effect
更新
仔细观察，该插件不支持+= 或-= 格式。
我在这个例子中破解了它：
http://jsfiddle.net/CxqSs/（见底部的新示例。）
绝对可以使用一些清理，并且可能应该添加到该插件中，但它在两种浏览器中都有效并且不依赖于未定义的行为。
BTW，我不知道是否值得注意，但是如果你让这个动画运行很长时间，它最终会溢出值并中断。这可以通过对背景图像的全长进行动画处理，然后在下一个动画之前在回调中将偏移量重置为 0px 来克服。这也将避免需要+= 格式。
还有，
需要注意的是speed: 1, step: 1和speed: 50, step: 50是等价的。
它们看起来速度不同的原因是因为
默认的缓动是“swing”，这意味着动画在整个过程中会稍微加速和减速，这意味着整体速度会受到一点影响。您应该将滚动案例的缓动更改为“线性”：
var animate = function() {
element.animate({
...
}, speed, "linear", animate);
};
这意味着您可以使用 backgroundPosition-Effect 插件，而无需使用“+=”，方法是将步长设置为 2247（图像的宽度），就像我上面所说的那样。 p>
而那终于让我们……等待它……
跨平台、不笨拙、不溢出、正确缓动、缺少额外参数、解决方案。
【讨论】：
step: 2247, 和step: -2247, 之后的逗号。而已。 jsfiddle.net/Rn3sc/3
此时脚本失败，因为您传递了无效的 CSS 值：
element.animate({
backgroundPosition: animStep + " 0px" /* evaluates to "+=50px 0px" */
}, speed, animate);
【讨论】：
" 0px" 和 空格 你真的知道这个脚本是做什么的吗？
好的，我们又来了：D
再次与原始版本相同，但在 IE 中只是为 backgroundPositionX 设置动画。
很抱歉上次没有真正关注 FF/Chrome。
另外：这当然不是很优雅，Adam Prax 对于问题所在是绝对正确的。我只是想发布一个解决方案。
【讨论】：
如果你查看 jQuery 的源代码，你会看到它使用this regexp 来解析参数（在你的例子中是+=50px 0px）。所以它会将它视为+=（增加）50（到五十）px 0px（单位，在数字后面附加）。当试图读取当前值时，jQuery uses parseFloat，它只是抓取字符串开头的数字。所以它完美地工作，即使多维属性可能不是 jQuery 程序员的想法。
除了IE8不支持获取background-position的当前值。有background-position-x 和background-position-y，但没有background-position。呃。因此，您最好的选择是检查浏览器类型，并根据情况为 background-position 或 background-position-x 设置动画：http://jsfiddle.net/22UWW/
（实际上有一个jQuery bug report关于这个，还有一个more elegant solution。）
【讨论】：
div 短，我需要 div 底部的图像，在 IE 中很好，图像在底部但在 Firefox 中，他们将达到顶峰