Jquery fadeIn and fadeOut background Command

Question

I have a scrolling background image using Jquery that is working fine. However I am trying to make the transitions between the image changes smoother and it doesn't seem to work. I'm sure it has something to do with the "fadeOut" line I used.

$(function() {
var body = $('body');
var backgrounds = new Array(
    'url(images/hso-boardwalk-background.jpg)',
    'url(images/hso-palmtree-background.jpg)' 
);

var current = 0;

function nextBackground() {
body.css(
   'background',
    backgrounds[current = ++current % backgrounds.length]
);

 setTimeout(nextBackground, 5000);
    $('background').fadeOut("slow");
 }
 setTimeout(nextBackground, 5000);
   body.css('background', backgrounds[0]);
});

Answer 1

You cannot do smooth transition using only body background image. As a workaround, you could try to use a temp DIV as following:

SEE DEMO

$(function () {
    var body = $('body');
    var backgrounds = new Array(
       'url(images/hso-boardwalk-background.jpg)',
       'url(images/hso-palmtree-background.jpg)' 
    );


    var current = 0;

    function nextBackground() {
        var bckg = backgrounds[current = ++current % backgrounds.length];
        var tmpDIV = $('<div/>', {
            id: "tmpDIV"
        }).prependTo('body').hide().css({
            position: "absolute",
            zIndex:-1,
            top:0,
            left:0,
            height: $(window).height(),
            width: $(window).width(),
            background: bckg
        }).fadeIn("slow", function () {
            body.css('background',bckg);
            $(this).remove();
        });


        setTimeout(nextBackground, 5000);

    }
    setTimeout(nextBackground, 5000);
    body.css('background', backgrounds[0]);
});