jQuery example (in jsfiddle) working in firefox but not in IE8, 7

Question

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

Answer 1

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

1. There is more overhead in a speed of 1 (which is really a millisecond duration) because animate gets called more often.

2. 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.

Answer 2

The script fails at this point because you are passing an invalid CSS value:

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