几秒后隐藏 div

Question

我在想，如何在jQuery中隐藏一个div元素，在几秒钟后自动隐藏？就像Gmail的消息一样。

我已经尝试了我的最佳努力，但无法使其正常运行。

- James

---

仅仅隐藏足够吗？或者你需要它淡出吗？ - Joel Coehoorn

Answer 1

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

- swilliams

---

你已经在一次射击中很好地打败了疯狂的Joel Coehoorn！ :) - cregox

@James，最终结果肯定没有区别，但我认为使用.delay()实现在jQuery中更加“原生”和优雅。 - Paul T. Rawkeen

дҪ еҸҜд»Ҙз”Ё.hide()жқҘз«ӢеҚійҡҗи—ҸdivпјҢиҖҢдёҚжҳҜдҪҝз”Ё.fadeOut('fast')гҖӮ - Raptor

Answer 2

您可以尝试使用.delay()方法。

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

调用div，设置延迟时间（以毫秒为单位），并设置要更改的属性，本例中我使用了.fadeOut()进行动画处理，但您也可以使用.hide()。

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

- peter punk

---

这更好，因为我不需要使用setTimeout函数，代码更易读。 - Marek Bar

Answer 3

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/

- Robert Mauro

Answer 4

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

问题在于.delay()仅影响动画，所以您需要通过给.hide()设置持续时间来使其像动画一样工作。

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

通过给它一个很短的持续时间，它看起来像常规的.hide函数一样瞬间消失。

- Oisin Lavery

---

这对我很有帮助。它清楚地表明，您必须传递一些值给hide()，否则delay()将不会被触发。 - Brian Wagner

Answer 5

$.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/

(允许方法链式调用)

- Peter Smit

Answer 6

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

- kevin pepperman

Answer 7

可能最简单的方法是使用timers插件。 http://plugins.jquery.com/project/timers，然后调用类似于以下内容：

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

- stimms

---

使用计时器插件而不是setTimeout或setInterval有什么强制性的理由吗？ - spender

我认为下载并附加jquery插件比仅使用setTimeout 更不容易。 - Nathan Ridley

我并不认为这是一件坏事，但由于我很少在我的代码中使用计时器，所以为了那几次使用而保留该插件（即：额外的代码，臃肿）并不能抵消成本。如果你正在编写需要使用计时器的大量代码，并且正在使用jQuery，我可以理解为什么这个插件会非常有用，以保持与jQuery语法的一致性... - Jason Bunting

Answer 8

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

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

- Ch UmarJamil

---

请不要仅仅发布代码作为答案，还要提供解释您的代码是如何解决问题的。带有解释的答案通常更有帮助和更高质量，并且更有可能吸引赞同。 - Mark Rotteveel

Answer 9

我们可以直接使用

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

- subindas pm