几秒钟后隐藏 div

我想知道，在 jquery 中如何能够在几秒钟后隐藏一个 div？比如 Gmail 的信息。

我已经尽力了，但还是不能使它工作。

309785 次浏览
小开
最佳答案

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

setTimeout(function() {
$('#mydiv').fadeOut('fast');
}, 1000); // <-- time in milliseconds
#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"></script>
<div id="mydiv">myDiv</div>

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

小开

也许最简单的方法是使用计时器插件

$(this).oneTime(1000, function() {
$("#something").hide();
});
小开 
$.fn.delay = function(time, callback){
// Empty function:
jQuery.fx.step.delay = function(){};
// Return meaningless animation, (will be added to queue)
return this.animate({delay:1}, time, callback);
}

来自 http://james.padolsey.com/javascript/jquery-delay-plugin/

(允许方法链接)

小开

使用 jQuery 计时器还将允许您有一个与附加到对象的计时器相关联的名称。所以你可以在一个对象上安装几个定时器，然后停止其中任何一个。

$("#myid").oneTime(1000, "mytimer1" function() {
$("#something").hide();
}).oneTime(2000, "mytimer2" function() {
$("#somethingelse").show();
});


$("#myid").stopTime("mytimer2");

Eval 函数(及其相关函数 Function、 setTimeout 和 setInterval)提供对 JavaScript 编译器的访问。这有时是必要的，但在大多数情况下，它表明存在极其糟糕的编码。Eval 函数是 JavaScript 中被滥用最多的特性。

Http://www.jslint.com/lint.html

小开

你可以试试 .delay()

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

调用 div 设置延迟时间(以毫秒为单位)并设置要更改的属性，在本例中我使用。FadeOut () ，因此它可以是动画的，但是您可以使用。也藏起来。

Http://api.jquery.com/delay/

小开

有个很简单的方法。

问题是。延迟只效果动画，所以你需要做的是。Hide ()通过给动画一个持续时间来表现得像动画一样。

$("#whatever").delay().hide(1);

通过给它一个很短的持续时间，它看起来就像普通的.hide 函数一样是即时的。

小开

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

纯粹的隐藏，一秒钟的延迟

// hide in one second
$('#mydiv').delay(1000).hide(0);

纯粹的隐藏，没有拖延

// hide immediately
$('#mydiv').delay(0).hide(0);

动画隐藏

// start hide in one second, take 1/2 second for animated hide effect
$('#mydiv').delay(1000).hide(500);

淡出

// start fade out in one second, take 300ms to fade
$('#mydiv').delay(1000).fadeOut(300);

此外，这些方法可以将队列名称或函数作为第二个参数(取决于方法)。以上所有电话和其他相关电话的文件可以在这里找到: Https://api.jquery.com/category/effects/

小开

我们可以直接使用

$('#selector').delay(5000).fadeOut('slow');
小开 
<script>
$(function() {
$(".hide-it").hide(7000);
});
</script>


<div id="hide-it">myDiv</div>

提交答案