jQuery怎么控制一个div定时弹出来然后过一段时间定时关闭
问题分析:
首先来分析一下这个功能的两个步骤。
1、弹出:当页面初始化完毕后,等待N秒显示出div标签。
2、关闭:当div标签弹出后,再等待N秒后将其关闭。
解决方案:
可以使用JavaScript的setTimeout方法来做定时功能。
案例如下:
此案例设置页面初始化后5秒弹出div标签,再等5秒后关闭div标签。
HTML代码:
<div>我是DIV的内容</div>
CSS代码:
div{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: #000;
color: #FFF;
display: none;
}
JavaScript代码:
setTimeout(function(){
$('div').show(); //将DIV标签显示出来。
setTimeout(function(){
$('div').hide(); //将DIV标签隐藏。
}, 5000);
}, 5000);
页面初始化时为空白,5秒后的效果为:
$("#mydiv").fadeIn();//显示
setTimeout(function(){//5秒后隐藏
1、可以使用JavaScript的setTimeout方法来做定时功能,此案例设置页面初始化后5秒弹出div标签,再等5秒后关闭div标签。
2、HTML代码<div>我是DIV的内容</div>
CSS代码div.width: 200px;height: 200px;
line-height: 200px;
text-align: center;
background-color: #000;
color: #FFF;
display: none;
JavaScript代码:
setTimeout(function(){
$('div').show(); //将DIV标签显示出来。
setTimeout(function(){
$('div').hide(); //将DIV标签隐藏。
5000);
}, 5000);
$("#mydiv").fadeIn();//显示
setTimeout(function(){//5秒后隐藏
$("#mydiv").fadeOut();
}, 5000);
<div style="width:100px;height:100px;background:red;display:none;" id="mydiv"></div>
写了貌似没效果,不知道什么原因
我写个完整版的吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DIV</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script>
</head>
<body>
<div style="width:100px;height:100px;background:red;display:none;" id="mydiv"></div>
</body>
<script language="javascript" type="text/javascript">
setTimeout(function(){//2秒后显示ʾ
$("#mydiv").fadeIn();
}, 2000);
setTimeout(function(){//5秒后隐藏
$("#mydiv").fadeOut();
}, 5000);
</script>
</html>