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

2025-02-27 21:12:42
推荐回答(3个)
回答1:

问题分析:

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

1、弹出:当页面初始化完毕后,等待N秒显示出div标签。

2、关闭:当div标签弹出后,再等待N秒后将其关闭。

解决方案:

可以使用JavaScript的setTimeout方法来做定时功能。

案例如下:

此案例设置页面初始化后5秒弹出div标签,再等5秒后关闭div标签。

HTML代码:

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

回答2:

$("#mydiv").fadeIn();//显示

setTimeout(function(){//5秒后隐藏

1、可以使用JavaScript的setTimeout方法来做定时功能,此案例设置页面初始化后5秒弹出div标签,再等5秒后关闭div标签。

2、HTML代码

我是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);

回答3:

$("#mydiv").fadeIn();//显示
setTimeout(function(){//5秒后隐藏
    $("#mydiv").fadeOut();
}, 5000);

相关问答