jQuery在5秒后隐藏/删除DIV内容

如何自动隐藏或删除DIV的内容。我有容器，我把一些消息。jQuery在5秒后隐藏/删除DIV内容

<div id="msg-container"></div>

我想只显示几秒钟新的消息，也可以是5，10什么的，但我希望它空，添加新的消息，显示它比隐藏。我当然知道了“绝招”与的setTimeout：

setTimeout(function(){ 
    $('#divID').remove(); 
}, 5000);

但在这个选项我要通过这个脚本每封邮件，这不是我所期待的。我也尝试了setInterval，但由于名称表示它是间隔时间，因此消息可以在5秒内可见，或者如果消息到达间隔时间的末尾，它甚至可能不可见。
有没有什么方法可以编写简单的脚本，它会在内容填满5秒后精确清理我的DIV？

来源

2015-04-01 Alex

你如何传递信息？你可以发布该功能吗？ – 2015-04-01 23:14:41

通常使用ajax调用。是的，我知道这一点，我也这样做，但我正在寻找一种比每次都在消息中添加JS脚本更好的东西。 – Alex 2015-04-01 23:17:09

假设你有一个消息容器。

<div id="message-container"> 
</div>

只需创建一个类似于消息管理器的东西来处理这种功能。

var MessageManager = { 
    show: function(content) { 
     $('#message-container').html(content); 
     setTimeout(function(){ 
      $('#message-container').html(''); 
     }, 5000); 
    } 
}; 

MessageManager.show('<h1>Testing</h1>');

每次你想显示的东西，只需调用MessageManager.show（）与你想显示的内容。

来源

2015-04-01 23:20:24

简单，好看又简单:)。谢谢。 – Alex 2015-04-01 23:29:39

首先，您的选择器与您的div的ID不匹配。

setTimeout(function(){ 
    $('#msg-container').remove(); 
}, 5000);

但是，如果是故意的，你试图删除的“MSG-容器”内的div让我们用类“divClass”说，这会是这样。

setTimeout(function(){ 
    $('#msg-container .divID').remove(); 
}, 5000);

来源

2015-04-01 23:18:02 JasonKretzer

我知道，这只是一个例子。我想清除＃msg-container，这不是问题，问题是如何在5秒钟内看到它。 – Alex 2015-04-01 23:21:16

一种方法是使用setTimeout和自定义事件的组合。每当你想添加一条新消息或一组消息时，你都会触发这个事件并将相应的消息/消息传递给它。

E.g.

$('.message').trigger('message:add', 'I am your new message!');

然后

$('.message').on('message:add', function(event, message) { 
    // do your thing 
});

的jsfiddle here

或者你也可以使用 “咆哮” 的插件，例如http://ksylvest.github.io/jquery-growl/

来源

2015-04-01 23:20:46 realshadow

jQuery在5秒后隐藏/删除DIV内容

回答

相关问题