Mostrar alertas en orden

[IDRID]

Estoy haciendo un div donde se vayan insertando las alertas y las vaya mostrando de una en una. El problema es que no se como hacer para que cuando oculte la primera, salga la segunda y se oculte y de paso a la tercera y asi todo el rato.

Código HTML:

<ul class="messages-box"></ul> 

Código:

    if (typeof console  != "undefined") 
    if (typeof console.log != 'undefined')
        console.olog = console.log;
    else
        console.olog = function() {};

console.info = function(message) {
    console.olog(message);

    setTimeout(function(){
        $('.messages-box').append('<li style="display:none;">' + message + '</li>');
        jQuery(".messages-box li:first").fadeIn(300, "linear");
     }, 2000);

    setTimeout(function(){
        jQuery(".messages-box li:first").fadeOut(300, "linear", function() { 
        $(this).remove(); 
        jQuery(".messages-box li:first").fadeIn(300, "linear"); 
        // Borar despues del tiempo y continuar con la siguiente alerta hasta el final
        });
     }, 6000);
}

Gracias.

[IDRID]

Actualizo el codigo pero no funciona

Código:

console.info = function(message) {
    console.olog(message);
    var ms = $('.messages-box li');

    jQuery.each(ms, function() {
    setTimeout(function(){
        $('.messages-box').append('<li style="display:none;">' + message + '</li>');
        jQuery(".messages-box li:first").fadeIn(300, "linear");
     }, 2000);

    setTimeout(function(){
        jQuery(".messages-box li:first").fadeOut(300, "linear", function() { 
        $(this).remove(); 
        });
     }, 6000);
    });
});