Raw Transitions

by nickadeemus2002

HTML

<div id="background">
    <div id="blue"></div>
    <div id="green"></div> 
    <div id="red"></div>
    <div id="yellow"></div>    
    
</div>

CSS

#background{ position:relative; width:200px; margin:30px auto; height:200px}
#background div{ position:absolute; left:0; top:0; width:100%; height:100%; display:none}
#background div:first-child{display:block}

JavaScript

var displayTime = 5000,
    transitionTime = 2000;
var currIdx = 0;
var $slides = $('#background div');

function animateBG() {
    currIdx = (currIdx < 3) ? currIdx + 1 : 0;
    setTimeout(function() {
        $slides.css('z-index', 1);
        $slides.eq(currIdx).css('z-index', 2).fadeIn(transitionTime, function() {
            $slides.not(this).hide();
            animateBG();
        });
    }, displayTime)

}

// used just to set backgrounds for demo
function LoadDemo() {
    $slides.each(function() {
        $(this).css('background', this.id)
    });
}

LoadDemo();
animateBG()