设置div默认顶部显示,并滑动显示或隐藏

原创

清风凌雪 2019-12-04 16:41:46 博主文章分类：前端 ©著作权

©著作权归作者所有：来自51CTO博客作者清风凌雪的原创作品，请联系作者获取转载授权，否则将追究法律责任

html 　　div默认是隐藏的,如果想默认显示,去掉style里面的"display:none;"即可

<!-- 效果一 -->
<div id="msg" style="display:none;z-index:99;background:#d2d2d2;margin-left:0;margin-right:0;padding-right:15px;padding-left:15px;padding-top:15px;padding-bottom:15px;box-shadow:inset 0px -10px 16px rgba(22, 22, 23, 0.62);"></div>

<!-- 效果二 -->
<div id="msg" style="display:none;z-index:99;margin-left:0;margin-right:0;padding-right:15px;padding-left:15px;padding-top:15px;padding-bottom:15px;background:#545454;color:#fff !important;"></div>

js

// 延时0.2秒开始滑动显示(1000表示元素从隐藏到可见的速度,可为空)
setTimeout(function () {
	// slideDown() 方法通过使用滑动效果，显示隐藏的被选元素
	$('#msg').slideDown(1000);
	// slideUp() 方法通过使用滑动效果，隐藏显示的被选元素
	$("msg").slideUp();
}, 200);