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 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/

This works even in IE6: [link](http://www.protofunc.com/scripts/jquery/backgroundPosition/). Maybe helps You. — marioosh, Aug 09 '11 at 09:24
It must be the 'center' attribute which make IE to failed. Now that you have a static value (20px), IE could do it — Cyril Gandon, Aug 09 '11 at 11:26
No. In the fiddle i'm using jquery 1.3.2 instead of 1.5.2 and that works but.... then my other jquery fails — Oterox, Aug 09 '11 at 11:44

score 0 · Answer 1 · edited May 23 '17 at 12:04

0

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:

edited May 23 '17 at 12:04

Community

1
1

answered Aug 09 '11 at 09:31

Cyril Gandon

16,830
14
78
122

with that plugin i still get the same error.Do i have to add only jquery.backgroundPosition.js for the code to work? I've modified it in the demo but still dont works. – Oterox Aug 09 '11 at 10:14
Try to replace the center part of the animation : backgroundPosition: "-261px 20px" – Cyril Gandon Aug 09 '11 at 10:17

score 0 · Accepted Answer · answered Aug 09 '11 at 09:35

0

Animating background-position is technically unsupported by jQuery.

Use the jQuery BackgroundPosition plugin to fix this issue.

answered Aug 09 '11 at 09:35

hayesgm

8,678
1
38
40

i'm using that plugin but still doesn't work: [fiddle](http://jsfiddle.net/oterox/wpzT6/8/) – Oterox Aug 09 '11 at 12:13
I have gotten this plugin to work before. Your fiddle has fizzled (404). What is your issue? – hayesgm Aug 09 '11 at 17:20

score 0 · Answer 3 · answered Aug 09 '11 at 17:27

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.

How to animate background position in IE8?

--- UPDATE ---

--- UPDATE 2 ---

3 Answers3

Linked