javascript - jQuery:当通知可见时自动隐藏通知

Question

<div id="messages">
<div class="message"> <!-- Visible (5 seconds for hide, show the next, and hide again) -->
<div class="message" style="display:none;"> <!-- Hidden -->
<div class="message" style="display:none;"> <!-- Hidden -->
</div>

以下(noob)代码将隐藏 <div>创建五秒后标记，所以我想在五秒后隐藏每个通知，但当它可见时，它类似于幻灯片放映，但带有通知，每个通知可见时 5 秒。

function setid() {
    $('.message').each(function() {
        if($(this).attr('id')==uniqID) { 
            uniqID = Math.floor(Math.random()*9999999);
        }
    });
}

console.log = function(message) {
    console.olog(message);
    setid();
    $('#messages').append('<div id="' + uniqID + '" class="message"> + message + '</div>').show();
    $('#' + uniqID).slideDown(200).delay(5000).slideUp(200);
};

Answer 1

其实很简单:

$(".message").hide().first().show();
setTimeout(showNotifications, 5000);
function showNotifications(){
    $(".message:visible").remove();
    $(".message").first()show();
    if($(".message").length > 0){
        setTimeout(showNotifications, 5000);
    }
}

它是如何工作的:它选择所有 .message 元素并隐藏除第一个元素之外的所有元素。5 秒后，第一条消息将从网页中删除，接下来的消息将再显示 5 秒，直到网站中不再有通知消息为止。

还想要一些动画吗？看看这个:

$(".message").hide().first().show('slow');
setTimeout(showNotifications, 5000);
function showNotifications(){
    $(".message:visible").hide('slow', function(){
        $(this).remove();
        $(".message").first().show('slow');
        if($(".message").length > 0){
           setTimeout(showNotifications, 5000);
        }
    });
}​

Click here for a working example.