CODEWITHSUNDEEP
javascriptjqueryjquery-uianimationjquery-animate
Hamza
Hamza

Reputation:

Animating Background Image

I Like using Jquery and its companion Jquery Ui but can not find a way to animate background image over a certain period of time like 5 seconds. I can not do something like:

$('sampleelement').animate({'background-image':'url(hello.jpg)'},5000);

Any ideas??

Upvotes: 2

Views: 6028

Answers (7)

Evgeniy Skulditsky
Evgeniy Skulditsky

Reputation: 138

This is what you need: http://www.ovalpixels.com/bgImageTransition/

Upvotes: 0

CodeJoust
CodeJoust

Reputation: 3790

What I did on Cheer Us Up is used basic javascript to change the background image -- 

$(function(){
curr = 0;
setTimout(changeBg(),200); 

});

function changeBg() {
curr++;

document.body.style.backgroundPosition = curr + 20;

}

That is the basic idea. I didn't use jquery because I just wanted it to slowly slide by.

Upvotes: 0

GeekJock
GeekJock

Reputation: 11316

Use the jQuery Background-Position Animations plugin. See the demo.

Upvotes: 1

Maiku Mori
Maiku Mori

Reputation: 7469

You could create multiple images and just replace one with another using setTimeout. It's kind of like emulating .gif, just gives more flexibility and quality.

Upvotes: 0

jwl
jwl

Reputation: 10514

Pim Jager's approach is about the closest you will get without an animated gif.

Upvotes: 0

Daniel A. White
Daniel A. White

Reputation: 190907

Why don't you use an animated GIF?

Upvotes: 0

Pim Jager
Pim Jager

Reputation: 32119

This is not possible like this. Css does not allow for backgound image manipulation like this. You should put in a div with the background behind your content and fade that in:

<div id='background_img' style='display:none; position:absolute;'><!-- position me behind the content!--><img ... /></div> 
<div id='content'>YDADA</div>

$('#background_img').fadeIn(5000);

Upvotes: 2

Related Questions