Fade in from a background to another one

Let's say my element has background-image:background1.png.

How can I make the element's background fadein into background2.png without fading the first one开发者_StackOverflow out.

Just position a second element (with background2.png) right on top of the first. And fade in the second element.

Basically you can automate it with JQuery:

  $('.oldclass').prepend('<div class="newclass"></div>');
  $('.newclass').fadeIn('slow');

Working demo: http://jsfiddle.net/AlienWebguy/GKUnF/

I found a nice url where how to do that is explained clearly :

http://snook.ca/archives/javascript/jquery-bg-image-animations

But it require to create an image containing both, using CSS Sprites to achieve this...

Really, there isn't an easy or elegant way to do this. CSS animations rely on the fact that things like opacity have in-between values (i.e. they are continuous).

The best solution might be to have to separate divs with their respective backgrounds, positioning them right on top of each other. Then hide the second by default, and call fadeIn('slow') when you want to change to its background.