jQuery示例(在jsfiddle中)在firefox中工作但在IE8中没有工作,7

Question

为什么这个例子不适用于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

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. 速度为1(实际上是毫秒持续时间)的开销更大,因为更频繁地调用animate.

2. 默认的缓动是"摆动",这意味着动画在整个过程中会加速并略微减慢,这意味着整体速度会受到一些影响.你应该为你的滚动案例将缓动更改为"线性":

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

这意味着您可以使用backgroundPosition-Effect插件,而不使用'+ =',将步骤设置为2247(图像的宽度),就像我上面所说的那样.

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

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

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

Answer 2

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

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