Сдвиньте div на нагрузку тела

Question

Как можно скрыть div при загрузке страницы, а затем сдвинуть вниз после загрузки страницы? Я не хочу использовать CSS display:none;

Answer 1

Это подходит мне лучше, хотя не сползает вниз, затухание достаточно хорошо. http://jsfiddle.net/dqUaX/1/

Answer 2

Дайте этой скрипке попытку: http://jsfiddle.net/ahr3U/

Это в основном использует CSS3 для настройки всех параметров перехода (свойство перехода делает возможной анимацию), а затем просто добавляет видимый класс, как толькодокумент загружен для запуска анимации.

Вот код:

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