[英]Slide down a div on body load
如何在页面加载时隐藏div,然后在页面加载后向下滑动? 我不想使用CSS display:none;
试试这个小提琴: http : //jsfiddle.net/ahr3U/
这基本上是使用CSS3来设置过渡的所有参数(transition属性使动画成为可能),然后在加载文档以触发动画后仅添加可见类。
这是代码:
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");
});
尽管它不会滑下来,但渐入渐进效果足够好,这更适合我。 http://jsfiddle.net/dqUaX/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.