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开发者_如何学Python_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,

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.

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.

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.