美好的明天

前言

建网站时，我们可以在网站图片、视频上放一个DIV，DIV里放上自己网站的广告。然后用JS来控制这个广告DIV层几秒后自动隐藏消失。

因在首页增加了节日横幅，有的时候图片很长，有点碍眼，突发奇想增加一个延迟隐藏，理论广告延迟隐藏也是都可以实现。

效果预览

代码部署

以 CorePress Pro 主题为例，复制如下代码登录后台，粘贴到主题设置-->插入代码-->页脚代码即可。

<!--主页图片延迟隐藏（延迟5秒，淡出500毫秒）-->
<script charset="UTF-8">
      setTimeout(function(){
            $('.swiper-container').delay(5000).fadeOut(500);},1000);
</script>

下面分享一下控制DIV几秒钟后自动隐藏消失的其它几种JS代码：

方法一

这将在1秒(1000毫秒)后隐藏div。

setTimeout(function() {
    $('#mydiv').fadeOut('fast');
}, 1000); // <-- 时间（毫秒）

#mydiv{
    width: 100px;
    height: 100px;
    background: #000;
    color: #fff;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

如果您只想隐藏而不褪色，请使用hide()。

方法二

您可以尝试.delay()

$(".formSentMsg").delay(3200).fadeOut(300);

调用div设置延迟时间(以毫秒为单位)并设置要更改的属性，在这种情况下，我使用了.fadeOut()，因此动画，但也可以使用.hide()。

http://api.jquery.com/delay/

方法三

jquery提供了多种以定时方式隐藏div的方法，这些方法不需要设置以及以后清除或重置间隔计时器或其他事件处理程序。这里有一些例子。

延迟一秒钟隐藏

// 延迟一秒钟隐藏
$('#mydiv').delay(1000).hide(0);

无延迟隐藏

// 无延迟隐藏
$('#mydiv').delay(0).hide(0);

延迟一秒钟隐藏，延迟动画

// 一秒钟内开始隐藏，用1/2秒获得动画隐藏效果
$('#mydiv').delay(1000).hide(500);

淡出

// 一秒钟内开始隐藏，用300毫秒淡出
$('#mydiv').delay(1000).fadeOut(300);

此外，这些方法可以采用队列名称或用作第二个参数(取决于方法)。