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

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 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/