Question

中运行

我在IE8中收到此错误。

Message: Invalid argument.
Line: 156
Char: 295
Code: 0
URI: http://code.jquery.com/jquery-1.4.4.min.js

Answer 1

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

所有动画属性都应该是 单个数值（除非另有说明下面）;属性是非数字无法使用动画基本的jQuery功能......

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

然而，有一个jQuery插件可以满足您的需求：

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

<强>更新

仔细观察后，该插件不支持+=或-=格式。

我把它砍成了这个例子：

~~http://jsfiddle.net/CxqSs/~~ （见底部的新例子。）

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

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

同时，

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

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

速度为1（实际上是毫秒持续时间）的开销更大，因为更频繁地调用animate。

默认缓动是＆＃34; swing＆＃34;，这意味着动画在整个过程中加速并略微减慢，这意味着整体速度会受到一些影响。您应该将缓动更改为＆＃34; linear＆＃34;对于你的滚动案例：

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

这意味着您可以使用backgroundPosition-Effect插件，而不使用＆＃39; + =＆＃39;，将步骤设置为2247（图像的宽度），如我在上面说过。

终于让我们......等待......

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

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

Answer 2

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

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

Answer 3

好的，我们再来一次：D

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

再次与原版相同，然而再次只是在IE中动画backgroundPositionX。

上次没有真正关注FF / Chrome的道歉。

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

Answer 4

如果你检查jQuery的源代码，你会看到它使用this regexp来解析参数（在你的情况下是+=50px 0px）。因此，它会将其视为+=（增加）50（至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。）

jQuery示例（在jsfiddle中）在firefox中工作但在IE8中没有工作，7

4 个答案: