javascript – 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文档页面所述：

All animated properties should be a
single numeric value (except as noted
below); properties that are
non-numeric cannot be animated using
basic jQuery functionality….

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

但是,有一个jQuery插件可以执行您想要的操作：

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

更新

仔细观察,该插件不支持=或 – =格式.

我把它砍成了这个例子：

http://jsfiddle.net/CxqSs/(见底部的新例子.)

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

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

也,

应该注意的是速度：1,步长：1和速度：50,步长：50是等效的.

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

>速度为1(实际上是毫秒持续时间)的开销更大,因为更频繁地调用animate.
>默认缓动是“摇摆”,这意味着动画在整个过程中会加速并略微减慢,这意味着整体速度会受到一些影响.你应该为你的滚动案例将缓动更改为“线性”：

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

这意味着您可以使用backgroundPosition-Effect插件,而不使用’=’,将步骤设置为2247(图像的宽度),如上所述.

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

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

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