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.

Answer 2

你可以尝试这样的事情。

var intervalId, 
    $messages = $('#messages').find('.messages:visible'), 
    count = 0;

$messages.hide();//hide all the messages 

$messages.eq(count).show();//show the first message

intervalId = setInterval(function(){
   $messages.eq(count).hide();//hide the previous message
   if(count < $messages.length){
       $messages.eq(++count).show();//show the next message     
   }
   else{//all the messages are over clear the interval
       clearInterval(intervalId);
   }
}, 5000);

jQuery：在可见时自动隐藏通知

2 个答案: