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內容

回答

相關問題