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

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

<div id="msg" style="display:none;z-index:99;width:100%;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>

js

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

参考地址：jQuery 效果函数

原文地址：https://blog.51cto.com/1197822/2456068

时间： 2024-12-31 19:29:29

设置div默认顶部显示,并滑动显示或隐藏的相关文章

设置div中的div居中显示

设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> style样式: .big{ height:200px; width:200px; border:black solid 1px; position:absolute; left:150px; } .small{ height:100px; width:100px; background-color:green

easyUI draggable插件使用不当，导致拖动div内部文本框无法输入；设置echarts数据为空时就显示空白，不要动画和文字

先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text

距离顶部估计像素，显示div！

<html> <head> <title>slide</title> <style type="text/css"> #example1 {width:690px;height:3000px;margin:0 auto;background:#ccc;margin-top:200px;} #example2 {width:690px;height:2000px;margin:0 auto;background:#eee;} #

[ jquery 效果 slideDown([speed,[easing],[fn]]) slideUp([speed,[easing],[fn]]) ] 此方法用于滑动显示隐藏的被选元素:动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会被有动画，效果更流畅

此方法用于滑动显示隐藏的被选元素:动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来.在jQuery 1.3中,上下的padding和margin也会被有动画,效果更流畅 实例: <!DOCTYPE html><html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my

TOAD和PLSQL 默认日期显示、rowid显示、TNSNAME的修改

先说下要解决的问题: select rowid,acct_id,state_date from acct; 修改后,1)sql指明rowid,可以显示出来 2)时间格式显示为YYYYMMDD HH24:MI:SS 3)对于数字超长的,不使用科学计数法显示 安装与环境 (TOAD与PLSQL共存) TOAD 64BIT.PLSQL DEVELOPER 32BIT .各自的ORACLEINSTANT CLIENT TOAD通过安装包选择oracle instanct client路径安装:plsql

设置DevExpress GridControl控件时间列显示时、分、秒样式

如题,如果Dev GridControl控件绑定DataTable数据源时,DataTable中的某一列为Date类型时,GridControl默认显示样式只显示当前日期,并不会将时.分.秒显示出来.如图: 解决方案: 设置显示样式,如图: 设置完成,显示结果展示,如图:

[ jquery 效果 slideToggle([speed,[easing],[fn]]) ] 此方法用于滑动显示隐藏的被选元素

通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数; 这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示.在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this i

jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历停止所有的效果,从新触发效果就是标题的从左边淡出和背景颜色的变化,当鼠标离开图片后触发一个遍历,停止所有动画标题回到原处不见,背景颜色变回原样 主要的方法 $(".section  ul li").hover(function() //伪类的触发 $(this).find(".r

测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色

<!doctype html> <html> <head>     <title>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</title>     <meta name="author" content="阿耀王子"> </head> <body> <p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色<