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>

The following (noob) code will hide the <div> tag after five seconds of be created, so I want to hide each notification after five seconds but when it’s visible, It’s something like a slideshow but with notifications, 5 seconds per notification when it’s visible.

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

It’s actually very simple:

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

How it works:
It selects all the .message elements and hide them except the first one.
After 5 seconds, the first message will be removed from the webpage and the following message will be shown for another 5 seconds and this goes until there is no more notification messages in the site.

Want some animations as well? Check out this:

$(".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.