Here are two boxes that alternate fading in and out on top of one another: http://jsfiddle.net/jfriend00/3XwZv/.
The two boxes are positioned on top of one another using position: absolute in a position: relative container.
One fades out, the other fades in and when one completes, they reverse the process. The jQuery code looks like this:
var fadeinBox = $("#box2");
var fadeoutBox = $("#box1");
function fade() {
fadeinBox.stop(true, true).fadeIn(2000);
fadeoutBox.stop(true, true).fadeOut(2000, function() {
// swap in/out
var temp = fadeinBox;
fadeinBox = fadeoutBox;
fadeoutBox = temp;
// start over again
setTimeout(fade, 1000);
});
}
// start the process
fade();
The HTML looks like this:
<div id="wrapper">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
</div>
The CSS looks like this:
.box {
position: absolute;
height: 100px;
width: 100px;
}
#wrapper {position: relative;}
#box1 {background-color: #F00;}
#box2 {background-color: #00F; display: none;}