jQuery background image transition

Question

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,

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

DEMO: http://jsbin.com/ewoje3/2

try this:

$('.img_div').fadeOut( 100 ,  function(){
$(this).css('background','url(my_new_img.jpg)').fadeIn(100);
});