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

【问题标题】：jQuery hide/remove DIV content after 5 seconds5秒后jQuery隐藏/删除DIV内容
【发布时间】：2015-04-01 23:08:47
【问题描述】：

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

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

我只想显示几秒钟的新消息，它可以是 5、10 等等，但是我希望它为空，添加新消息，显示它而不是隐藏。我当然知道 setTimeout 的“窍门”：

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

但是在这个选项中，我必须在每条消息中都传递这个脚本，这不是我想要的。我也尝试过 setInterval，但顾名思义，它是间隔，因此消息可以在 5 秒内可见，或者如果达到间隔时间结束，甚至可以不可见。
有什么方法可以编写简单的脚本，在充满内容 5 秒后准确地清理我的 DIV？

【问题讨论】：

如何传递消息？您也可以发布该功能吗？
通常使用 ajax 调用。是的，我知道并且我这样做了，但我正在寻找比每次都在消息中添加 JS 脚本更好的东西。

标签： javascript jquery html

【解决方案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() 并使用你想展示的内容。

【讨论】：

简单、漂亮、容易:)。谢谢。

【解决方案2】：

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

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

但是，如果这是故意的，并且您试图删除“msg-container”中的 div，让我们说类“divClass”，它会是这样的。

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

【讨论】：

我知道，这只是一个例子。我想清理#msg-container，这不是问题，问题是在它可见 5 秒后怎么做。

【解决方案3】：

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

例如

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

【讨论】：

【解决方案4】：

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

【讨论】：

来自评论：虽然这可能是正确的答案，但如果您能添加一些解释，那就太好了。