几秒钟后隐藏div


123

我想知道,几秒钟后如何在jquery中隐藏div?例如Gmail的邮件。

我已经尽力了,但是无法正常工作。


1
只是藏起来足够好,还是需要它褪色?
乔尔·科洪

Answers:


247

这将在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()


2
你打败疯狂乔尔Coehoorn在一杆非常漂亮!:)
cregox

3
@James,可以肯定的是,最终结果没有区别,但是我认为使用的实现.delay()更“原生”且优雅jQuery
Paul T. Rawkeen

你可以替换.fadeOut('fast')使用.hide()的DIV的瞬间隐藏。
猛禽队

90

你可以试试 .delay()

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

调用div设置延迟时间(以毫秒为单位)并设置要更改的属性,在这种情况下,我使用了.fadeOut()以便可以对其进行动画处理,但也可以使用.hide()。

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


7
这是更好的方法,因为我不必使用setTimeout,并且代码更易于阅读。
Marek Bar

12

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/


10

有一种非常简单的方法可以做到这一点。

问题是.delay仅会影响动画,因此您需要做的是通过赋予.hide()一段持续时间,使其像动画一样起作用。

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

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



3

使用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


2

可能最简单的方法是使用timers插件。 http://plugins.jquery.com/project/timers,然后调用类似

$(this).oneTime(1000, function() {
    $("#something").hide();
  });

1
是否有任何令人信服的理由在setTimeout或setInterval上使用timers插件?
支出者

2
我要说的是,下载并安装一个jQuery插件,是不太容易比单纯使用setTimeout的。
内森·里德利

1
我认为这不一定是一件坏事,但是由于我很少在我的代码中使用计时器,所以在那几次中多次使用该插件(读:额外的代码,膨胀)不会超过成本。如果您编写了大量需要使用计时器的代码,并且使用的是jQuery,那么我可以理解为什么此插件对于保持jQuery语法非常有用...
Jason Bunting,2009年

0

我们可以直接使用

$('#selector').delay(5000).fadeOut('slow');

0
<script>
      $(function() {
      $(".hide-it").hide(7000);
    });              
</script>

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

请不要仅将代码发布为答案,还请提供解释您的代码的功能以及它如何解决问题的方法。带有解释的答案通常会更有帮助,而且质量更好,并且更有可能引起反对。
Mark Rotteveel
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.