Question

This probably has been asked numerous times (I just couldn’t find it).

I have four links which all correspond to their own “div” with information in it. What I want to happen is (the first div is displayed by default), click on the second link and the first fades out and the second div fades in (at the same spot of the other). I got the fade in/out working (in a sense), but they all just stack up and do some weird movement. I would appreciate any help. I have placed a test file on jsfiddle. My jquery probably is a bit screwy as well.

http://jsfiddle.net/buScL/

Answer 1

The problem is that your fading effects are all trying to happen at the same time. Using callbacks, you can control the order more strictly. See this JS Fiddle, or the identical code below. Why the ugliness when the fades happen at the same time? The blocks are naturally stacked according to the normal flow. When one is in the process of fading out, it still takes up space in the flow. It only releases that space at the very end of the fade, when display:none goes into effect. When the replacement box is fading it, it gets positioned below where it would normally belong until that final space release. That’s when it pops back up to the top in an ugly way. Check out jQuery’s documentation on fadeToggle and check out the callback section (fadeIn and fadeOut work the same way).

<div id="hello"> hello world! </div>
<div id="goodbye"> goodbye world! </div>

Javascript:

 ​$("#hello").click(function(){
        $(this).fadeToggle("slow", function(){
           $("#goodbye").fadeToggle("slow"); //Here is a callback
        });           
    });


$("#goodbye").click(function(){
    $(this).fadeToggle("slow", function(){
       $("#hello").fadeToggle("slow") //Here is a callback
    }) ;             
});
    ​

css:

div{
    width:100px;
    height:100px;
}

#hello{
    background-color:red  ; 
}

#goodbye{
    background-color:blue;
    display:none;

}