Slide down a div on body load

Question

How can I have a div hide as the page is loading and then slide down once the page loads? I don't want to use CSS display:none;

Answer 1

Give this fiddle a try: http://jsfiddle.net/ahr3U/

This basically uses CSS3 to set up all the parameters of the transition, (the transition property makes the animation possible) and then just adds the visible class once the document has loaded to trigger the animation.

Here is the code:

HTML:

<div id="notification">Page load complete...</div>

CSS:

#notification {
    background-color: #F00;
    color: #FFF;
    height: 25px;
    position: absolute;
    top: -25px;
    width: 100%;
    transition: top 0.5s;
    -moz-transition: top 0.5s;
    -webkit-transition: top 0.5s;
    -o-transition: top 0.5s;
}

#notification.visible {
    top: 0px;
}

Javascript:

$(document).ready(function(){
    $("#notification").addClass("visible");
});

Answer 2

This suits me better, although it does not slide down, fading in is good enough. http://jsfiddle.net/dqUaX/1/