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

jQuery hide/remove DIV content after 5 seconds

本文关键字：删除 DIV 内容 隐藏 5秒 jQuery      更新时间：2023-09-26

如何自动隐藏或删除div的内容。我有一个放信息的容器。

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

我想只显示几秒钟的新消息，可以是5，10，但我希望它是空的，添加新消息，显示它，然后隐藏。我当然知道setTimeout:的"窍门"

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

但在这个选项中，我必须将这个脚本与每条消息一起传递，这不是我想要的。我也尝试过setInterval，但顾名思义，它是interval，因此消息可以在5秒内可见，甚至在到达时间间隔结束时也可以不可见
有没有什么方法可以写一个简单的脚本，在我的DIV充满内容后5秒就可以清除它？

假设您有一个消息容器。

<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（）即可，其中包含要显示的内容。

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

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

然而，如果这是故意的，并且您正试图删除"msg容器"中的div，比如说类"divClass"，它会是这样的。

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

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

setTimeout(function(){
  $('#divID').hide();
}, 5000);
相关文章：