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

Question

如何自动隐藏或删除DIV的内容。我把一些信息放在一个容器里。

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

我想显示新消息只有几秒钟，它可以是5,10什么，但然后我想它是空的，添加新消息，显示它，而不是隐藏。我当然知道setTimeout的"诀窍"：

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

但是在这个选项中，我必须通过每个消息传递这个脚本，这不是我要找的。我也尝试过setInterval，但是正如名字所说，它是间隔，所以消息可以在5秒钟内可见，或者如果它到达间隔时间的末尾，甚至可以不可见。
有没有什么方法可以编写简单的脚本来清理我的DIV正好在5秒后才被内容填满？

Answer 1

一种方法是结合使用setTimeout和自定义事件。每次要添加新消息或消息集时，都会触发此事件并向其传递相应的消息。

例如。

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

然后

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

JSFiddle这里

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

Answer 2

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

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

然而，如果这是有意的，并且您试图删除“msg container”中的div，让我们用类“divClass”来表示，它将是这样的。

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

Answer 3

假设您有一个消息容器。

<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（）来显示您想要显示的内容。