Slide down a div on body load

问题:

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;

回答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");
});

回答2:

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