Question

如何自动隐藏或删除DIV的内容。我有容器，我放了一些消息。

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

我想只显示几秒钟的新消息，它可以是5,10，但是我想要它为空，添加新消息，显示它而不是隐藏。当然我知道setTimeout的“技巧”：

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

但是在这个选项中我必须将每个消息传递给这个脚本，而这不是我要找的东西。我也试过了setInterval，但是正如名字所说的那样是间隔，所以消息可以看到5秒钟，或者如果它到达间隔时间结束时甚至是不可见的。
是否有任何方法可以编写简单的脚本，在填充内容后5秒后完全清理我的DIV？

Answer 1

假设您有一个消息容器。

<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（）即可。

Answer 2

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

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

但是，如果那是故意的并且你试图删除“msg-container”中的div，让我们用类“divClass”来说，就像这样。

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

Answer 3

一种方法是使用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/

Answer 4

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

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

4 个答案: