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> 

Следующий (нуб) код скроет <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);