根据身体负荷向下滑动一个 div

Question

如何让 div 在页面加载时隐藏，然后在页面加载后向下滑动？我不想使用 CSS display:none;

Answer 1

尝试一下这个小提琴： 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");
});

Answer 2

这个比较适合我，虽然不会滑下来，但是淡入就足够了。
http://jsfiddle.net/dqUaX/1/