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

Posted 2023-03-06

【中文标题】jQuery 示例（在 jsfiddle 中）在 Firefox 中工作，但在 IE8、7 中没有

【英文标题】：jQuery example (in jsfiddle) working in firefox but not in IE8, 7

【发布时间】：2011-06-07 00:36:13

【问题描述】：

为什么这个例子在 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

【问题讨论】：

怎么样：***.com/questions/710756/…

【参考方案1】：

根据 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是等价的。

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

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

默认的缓动是“swing”，这意味着动画在整个过程中会稍微加速和减速，这意味着整体速度会受到一点影响。您应该将滚动案例的缓动更改为“线性”：

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

这意味着您可以使用 backgroundPosition-Effect 插件，而无需使用“+=”，方法是将步长设置为 2247（图像的宽度），就像我上面所说的那样。 p>

而那终于让我们……等待它……

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

跨平台、不笨拙、不溢出、正确缓动、缺少额外参数、解决方案。

【讨论】：

我的示例在 IE、Firefox 和 Chrome 中都可以正常工作。

大声笑，我没有IE7的副本可以使用，但是得到了一个，经过多次调试，问题无关紧要。删除step: 2247, 和step: -2247, 之后的逗号。而已。 jsfiddle.net/Rn3sc/3

【参考方案2】：

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

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

【讨论】：

它是" 0px" 和 空格 你真的知道这个脚本是做什么的吗？

谢谢，修正了空间错字。它仍然是无效的 CSS：“+=50px 0px”。

@Jitendra Vyas：我不这么认为，这和你的代码一样！无论如何，我正在研究可能是什么问题

这是他的代码，我剪切并粘贴了导致IE错误的部分代码......

我认为您可能必须在此处使用 eval(animStep + "0px") 才能使其正常工作，或者类似的东西。似乎 IE 只评估 'backgroundPosition: animStep' 部分，所以你必须强制它。

【参考方案3】：

好的，我们又来了：D

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

再次与原始版本相同，但在 IE 中只是为 backgroundPositionX 设置动画。

很抱歉上次没有真正关注 FF/Chrome。

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

【讨论】：

在 IE 中工作，我很抱歉。我应该在发布之前进行测试。

完全是这样，但是为什么当我在几分钟内返回相同的答案（尽管有效）时。

【参考方案4】：

如果你查看 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 中，他们将达到顶峰

@Jitendra Vyas：您可以尝试将 0px 替换为 100%，或者只使用与图像大小完全相同的内部 div。