jQuery 一段时间后如何隐藏div?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2426304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 13:29:23  来源:igfitidea点击:

How to hide a div after some time period?

jqueryhtmlfadeout

提问by rag

I need to hide a div(like "mail sent successful" in Gmail) after a certain time period when I reload the page.

div当我重新加载页面时,我需要在一段时间后隐藏(例如 Gmail 中的“邮件发送成功”)。

How can I do that?

我怎样才能做到这一点?

回答by rosscj2533

Here's a complete working example based on your testing. Compare it to what you have currently to figure out where you are going wrong.

这是基于您的测试的完整工作示例。将它与您目前所拥有的进行比较,以找出您哪里出错了。

<html> 
  <head> 
    <title>Untitled Document</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript"> 
      $(document).ready( function() {
        $('#deletesuccess').delay(1000).fadeOut();
      });
    </script>
  </head> 
  <body> 
    <div id=deletesuccess > hiiiiiiiiiii </div> 
  </body> 
</html>

回答by marcgg

In older versions of jquery you'll have to do it the "javascript way" using settimeout

在旧版本的 jquery 中,您必须使用settimeout以“javascript 方式”执行此操作

setTimeout( function(){$('div').hide();} , 4000);

or

或者

setTimeout( "$('div').hide();", 4000);

Recently with jquery 1.4this solution has been added:

最近在jquery 1.4 中添加了这个解决方案:

$("div").delay(4000).hide();

Of course replace "div" by the correct element using a valid jquery selectorand call the function when the document is ready.

当然,使用有效的jquery 选择器将“div”替换为正确的元素,并在文档就绪时调用该函数。

回答by Jage

setTimeout('$("#someDivId").hide()',1500);

回答by Osahady

$().ready(function(){

  $('div.alert').delay(1500);
   $('div.alert').hide(1000);
});
div.alert{
color: green;
background-color: rgb(50,200,50, .5);
padding: 10px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="alert"><p>Inserted Successfully . . .</p></div>