Change background-image of a div with fade effect every 10 seconds with jquery

Question

I would like to create a slideshow in the header area of my page. It should change the background image every 10 seconds with a nice fade effect. And since I'm using jQuery for other stuff already I would like to use it for that as well.

So my markup is just:

<div id="header">
    <!--other stuff here...-->
</div>

And my CSS at the moment is:

#header {
    background:  url('images/header_slides/slide_1.jpg') no-repeat;
}

So now what I want is that after 10 seconds it would change to

#header {
    background:  url('images/header_slides/slide_2.jpg') no-repeat;
}

with a nice slow fade effect.

Answer 1

I answered a similar question at How to fill browser window with rotating background Image?. You can fade background colors but not background images. You must have your images in <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so your images acts like a background images and are behind everything else.

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(10000 * index).fadeIn(10000).fadeOut();
    });
}
test();

Check working example at http://jsfiddle.net/ewsQ7/5/