jQuery fade in/out div to a different div?

Question

Is it possible to have a div fade out, then fade in at the same place with a different div with different content when you click a link or button?

It'd obviously use the .fadeIn() and .fadeOut() functions but I'm not sure what all the code would look like, especially with positioning, and the ability to do it twice on the same page.

Answer 1

If you're looking to fade out one </div> then fade in a different one:

<div id="div1"></div>
<div id="div2" style="display: none"></div>
<div><a href="#" id="triggerButton">Swap Divs</a></div>

$('#triggerButton').click(function(e){
    e.preventDefault();
    $('#div1').fadeOut('fast', function(){
        $('#div2').fadeIn('fast');
    });
});

If you're looking to replace the </div> that is faded out in the same place with a different one:

<div id="div1"></div>
<div><a href="#" id="triggerButton">Swap Divs</a></div>

$('#triggerButton').click(function(e){    
    $('#div1').fadeOut('fast', function(){
        $('#div1').replace('<div id="div2"></div>').fadeIn('fast');
    });
});

Hope this helps.

Answer 2

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;}