How do I fade background images using jQuery?

Question

I want to have the background image change form one to another and fade in the process. Consider this for a mouseover/mouseout situation.

How do I fade background images using jQuery?

Is there a jQuery plugin that I need?

Answer 1

There might be something available, but it should be easy to put together from the following parts:

• Use the hover pseudo event to check when the mouse enters and leaves an element.
• Use fadeIn and fadeOut to change the opacity of an element.
• Create a div with position:absolute and put two images inside it with position:relative. This will make the images stack on top of each other