Animate background-image with jQuery?

[htl]

Hi all, I’m pleased to join CSS-Tricks with all of you. I wonder how I can animate the background-image of an element with jQuery. I have been trying to do that by using the animate function of jQuery but it didn’t work so well :cry:
Here is my snippet of code:
CSS:

Code:

#wrapper {
width: 800px;
height: 600px;
position: relative;
background: #92C87A url(“background.jpg”) -400px -200px no-repeat;
margin: 0 auto;
}

JS:

Code:

$(“#move”).click(function(){
$(“#wrapper”).animate({
backgroundImage: “background.jpg”,
backgroundPosition: “0px -400px”,
backgroundRepeat: “no-repeat”
}, 1000 );
});

I want the background to move cross the monitor, but actually it suddenly appeared at -400px -400px position and began to move from this to -400px -200px position.
Please help me with this problem.
Thank you very much!!!

[htl]

Hi toby,
Thank you very much! I have tried your solution anh it worked perfectly. I was a bit confused at first time because I hadn’t downloaded the code in the link you had given :mrgreen: .
Again, thank you very much :D
PS: This works on Firefox and Opera but have nothing to do with IE6. I should say it’s too cool for IE :P

[dink]

Is there a similar plugin available for using .animate with backgroundImage?

So for example;

function fadeImage(){ $(this).animate({backgroundImage: "image.jpg"}, 600);}

?

[julieday]

is the easing plugin necessary if i just want to animate the background image by just switching it? no fade,puff,slide etc necessary just a timed like background image switcher? i cant seem to find this info anywhere,thanks in advance!

[Author]

Posts