Question

I have a div which currently has a static background image.

I need to create a slideshow of background images for this div.

I am able to achieve this by just setting a timeout and then changing the background image in the CSS but this is not very elegant.

I would ideally like to fade the background images out and in, but the div contains other page elements so I can not alter the opacity in any way.

Does anyone know of a good way to do this using jquery??

Here’s some code which fades out/in but fades out the contents of the div too.

$("#slideshow").fadeOut(5000, function(){
    $("#slideshow").css('background-image','url(myImage.jpg)');
    $("#slideshow").fadeIn(5000);
});

Answer 1

HTML:

<div class="slideshow"></div>

CSS:

.slideshow
{
    position: relative;
    width: 350px;
    height: 150px;
}
.slideshow img
{
    position: absolute;
    width: 350px;
    height: 150px;
    z-index:-1;
}

jQuery

var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;

doSlideshow();

function doSlideshow()
{
    if($('.slideshowimage').length!=0)
    {
        $('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
    }
    else
    {
        slideshowFadeIn();
    }
}
function slideshowFadeIn()
{
    $('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
    if(nextimage>=images.length)
        nextimage=0;
}

jsfiddle Demo