How to animate background position in IE8?

Question

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").animate({
        backgroundPosition: "-261px center"         
    }, 12000 );
});

I'm using jquery-1.4.3.min.js

Is there a way to make it work in IE8?

--- UPDATE ---

i've created this fiddle and now it works¿?¿?¿ I havent changed nothing.Just copied the fiddle source frame and saved as index3.html and works.

I don't understand nothing, but its working! Can anyone explain that?

You can see the result here: dev.thepixellary.es/index3.html

--- UPDATE 2 ---

it works because in fiddle i was using jquery 1.3.2 instead of 1.5.2 but then this code dont work(IE8):

$(".menu li").each(function(idx) {
  $(this).delay(idx * 1000).fadeIn("slow");
});

jsfiddle.net/oterox/wpzT6/8/

Answer 1

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

Answer 2

Animating background-position is technically unsupported by jQuery.

Use the jQuery BackgroundPosition plugin to fix this issue.

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