jQuery怎么控制一个div定时弹出来然后过一段时间定时关闭

 我来答
张恺阳
2017-05-11 · 知道合伙人软件行家
张恺阳
知道合伙人软件行家
采纳数:166 获赞数:532
开发过各种类型网站及APP等,如有相关问题可以随时向我提问。

向TA提问 私信TA
展开全部

问题分析:

首先来分析一下这个功能的两个步骤。

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秒后的效果为:

帐号已注销
2018-04-08 · TA获得超过2.3万个赞
知道小有建树答主
回答量:147
采纳率:0%
帮助的人:5.4万
展开全部

$("#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);

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
vision_Yiu
2016-06-12 · TA获得超过349个赞
知道小有建树答主
回答量:251
采纳率:100%
帮助的人:72.3万
展开全部
$("#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>

本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式