jQuery示例（在jsfiddle）在Firefox中工作，但不是在IE8，7 [英] jQuery example (in jsfiddle) working in firefox but not in IE8, 7

问题描述

为什么此示例在IE中无法使用 http://jsfiddle.net/8RZVt/

我在IE8中收到此错误。

 消息：参数无效。 
 Line：156 
 Char：295 
 Code：0 
 URI：http://code.jquery.com/jquery-1.4.4.min.js 
  c>根据jQuery，这是因为，如在<$ c中所述的  $ c> animate 文档页面：
 
 
所有动画属性应为
 数值（以下标记为
除外）;属性
非数字不能使用
动画基本的jQuery功能.... 
 
 
实际上，在Firefox中使用未定义的行为。正确的做法是在backgroundPositionX上进行动画处理，但是Firefox不支持this。
 
 
 
但是，有一个jQuery插件， p> 
 
 
  http://plugins.jquery.com/ project / backgroundPosition-Effect  
 
 
 
 更新： 
 
 
 ，该插件不支持 + = 或  -  = 格式。
 
 $ b b 
我在这个例子中入侵了：
 
 
 
  http://jsfiddle.net/CxqSs/  ）
 
 
 
肯定可以使用一些清理，并且应该添加到该插件，但它可以在两个浏览器中工作，不依赖于未定义的行为。 p> 
 
 
 BTW，我不知道它是否值得注意，但如果你离开这个动画运行很长时间，它最终会溢出的价值和断裂。这可以通过动画的背景图像的全长，然后在下一个动画之前的回调重置偏移量为0px来克服。这也将避免需要 + = 格式。
 
 
 
 也，
 
 
 
应注意，速度：1，步骤：1 和速度：50， 
 
 
 
它们看起来不同的原因是因为
 $ 
 b $ b 
速度为1（这实际上是一个毫秒的持续时间）有更多的开销，因为动画被更频繁地调用。
 
 
 
默认宽松是swing ，这意味着动画在整个过程中都会加快和减慢，这意味着整体速度会受到一点影响。您应该为滚动情况将缓动更改为线性：
  var animate = function（）{
元素.animate（{
 ... 
}，速度，线性，动画）; 
}; 
  
 
 
 
 您可以使用backgroundPosition-Effect插件，而不使用'+ ='，通过将步骤设置为2247（图像的宽度），如上所述。
 
 
 
  finally 让我们...等待... 
 
 
 
  http://jsfiddle.net/zyQj3/20/  
 
 
 
跨平台，非klud ，不溢出，正确缓和，额外的参数缺乏，解决方案。
 
Why this example not working in IE http://jsfiddle.net/8RZVt/

I'm getting this error in IE8.
Message: Invalid argument.
Line: 156
Char: 295
Code: 0
URI: http://code.jquery.com/jquery-1.4.4.min.js

解决方案
According to jQuery, this is because, as stated on the animate documentation page:

  
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....
So, in fact, in Firefox you are using undefined behavior.  The correct thing to do would be to animate on backgroundPositionX, however Firefox does not support this.

There is, however, a jQuery plugin that does what you want:

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

Update

On closer inspection, the plugin does not support += or -= formats.

I hacked it into this example:

http://jsfiddle.net/CxqSs/  (See new example at bottom.)

Could definitely use some cleanup, and should probably be added to that plug-in, but it works in both browsers and doesn't rely on undefined behavior.

BTW, I don't know if it's worth noting, but if you leave this animation running a long time, it will eventually overflow the value and break.  This could be overcome by animating the full length of the background image and then resetting the offset to 0px in the callback before the next animate.  This would also avoid needing the += format.

Also,

It should be noted that speed: 1, step: 1 and speed: 50, step: 50 are equivalent.

The reason they look different speeds is because

There is more overhead in a speed of 1 (which is really a millisecond duration) because animate gets called more often.
The default easing is "swing", meaning that the animation speeds up and slows down slightly throughout it's course, meaning that the overall speed is affected a bit.  You should change the easing to "linear" for your scrolling case:
var animate = function() {
    element.animate({
        ...
    }, speed, "linear", animate);            
};

This means that you could use the backgroundPosition-Effect plugin, without the '+=', by setting your step to 2247 (the width of the image), like I stated above.

And that finally brings us to... wait for it...

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

Cross-platform, non-kludgy, non-overflowing, correctly easing, extra parameter-lacking, solution.

                        
这篇关于jQuery示例（在jsfiddle）在Firefox中工作，但不是在IE8，7的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！