Jquery Fade out one element and show another with setTimeout.

this will fade out an element and use the 'setTimeout' function to pause it before displaying a different element.

by oddacon

HTML

<div id="slidedown">Welcome to this panel.</div>
<div id="content">here is some content.<br /><a id="test" href="#">Click Me</a><br />to hide this content.</div>

CSS

#content, #slidedown{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
text-align:center;
}
#content{
color: #D63301;
background-color: #FFCCBA;
}
#slidedown{
background-color: #BDE5F8;
color: #00529B;
display: none;
}

JavaScript

$(document).ready(function() {
        $("#test").bind("click", function() {
                setTimeout(function() {
                $('#slidedown').slideDown("slow");
            }, 500);
            $("#content").fadeOut(500);
            $(this).stop().animate({ "opacity": "1" }, "slow");
            });
        });