CODEWITHSUNDEEP
jquerycss
Hock
Hock

Reputation: 5804

jQuery background image transition

I have a div that has a 'home.jpg' image as background and I want the background to be 'another_image.jpg' when I click something. The thing is that I want the new background to fadeIn and not just to appear (by doing some .css('background', url('another_image.jpg')); )

Is there a way to do that? I've tried the bgImageTransition plugin but it just adds another element on top of the div I had...

Thanks,

Upvotes: 3

Views: 8764

Answers (3)

Mottie
Mottie

Reputation: 86413

You should check out this blog post about animating background images... it is a very cool effect. All you would have to do is turn your two images into a sprite and use that script.

Here is the demo.

Upvotes: 1

Ben
Ben

Reputation: 16533

EDIT: added a cross-fade effect: http://jsfiddle.net/8vHa2/3/

(Click the JQuery logo)

Keep in mind that this kind of effects need a second element to be faded out or in, so my recommendation is for you to stick with the plugin you were trying.

Upvotes: 0

SLaks
SLaks

Reputation: 887285

The only way to do this is to fade in another element with the new background.

Alternatively, you could change the background immediately, then create a new element with the old background and fade it out.

Upvotes: 3

Related Questions