How To Animate Background Position In IE8?

I have a problem in IE8 with an animation effect. The code works in firefox, safari, chrome... but no in IE8. The demo is here. The code I'm using is: $(function(){ $('#wrapper

Solution 1:

Animating background-position is technically unsupported by jQuery.

Use the jQuery BackgroundPosition plugin to fix this issue.

Solution 2:

It is a undefined beahviour for all browsers. If it works in some browser, it is by luke.

See the doc:

All animated properties should be animated to a single numeric value.

You have to use this plugin : Background-position animations

Some duplicates:

• jQuery animate background position in chunks?
• jquery animate background position

Solution 3:

Working in IE8 !!

you can see the solution here

I've replaced my code with this one:

$.fn.scrollingBackground = function(options) {

   // settings and defaults.
    var settings = options || {};
    var duration = settings.duration|| 1;
    var step = settings.step || 1;

    var element = this;

    var animate = function() {
        element.css("background-position", "0px 0px");
        element.animate({
            backgroundPosition: step + "px 0px"
        }, duration);            
    };
    animate();
};

and i'm using the jQuery BackgroundPosition plugin

thk all.