10

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.

4
  • Have a look at api.jquery.com/fadeIn and api.jquery.com/fadeOut
    – Rob W
    Oct 14, 2011 at 21:30
  • Can you post any related code?
    – dSquared
    Oct 14, 2011 at 21:30
  • 1
    Of the same time ?? You mean of the same type ?? I would reword what you're asking for, it's very unclear at the moment. Oct 14, 2011 at 21:32
  • Sorry for the confusion. I meant at the same place. So you click a button, the current div fades out, then another div fades in where the previous div faded out.
    – Charlie
    Oct 14, 2011 at 21:37

3 Answers 3

15

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.

2
  • How is this triggered? And I'm guessing that in the first example (which is what I want to happen, having a div fade out then a new one fade in) would require some css too, to hide div2 before it is shown?
    – Charlie
    Oct 14, 2011 at 21:44
  • 1
    @Charlie It can be triggered by pretty much any event in jQuery; I've edited the answer to display it being changed by a click event on an anchor tag. Also added display: none to hide the second div.
    – dSquared
    Oct 14, 2011 at 21:51
10

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;}
2
  • If you have links in each of the boxes that are fading in and out, will the links still work? May 23, 2013 at 15:27
  • 1
    @nicholaschris - only the top-most link will work since the objects are overlapping.
    – jfriend00
    May 23, 2013 at 15:38
1

fadeIn() and fadeOut()

$("#element1").fadeOut();
$("#element2").fadeIn();
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.