jQuery: Déplacement de type fenêtre (ou FIFO) DIV?

Question

J'ai essayé d'obtenir cet effet pendant quelques heures maintenant et je dois admettre que j'y échoue. J'essaie de construire un DIV qui accepte un certain nombre d'éléments (disons 5), lorsque le 6ème élément est ajouté, le premier élément qui a été ajouté devrait être supprimé (premier entré, premier sorti). La sensation devrait avoir une sorte de fadeIn et fadeOut. Voici ce que je réussi à écrire jusqu'à présent:

... 
//Create a ul element with id 'ulele' and add it to a div 
... 
//Do an ajax call and when an element arrives 
Hash = ComputeHash(message) 
if(!$("#" + Hash).exists()) { 
    var element = $("<li></li>").html(message).attr('id', Hash).prependTo("#ulele"); 
    $("#" + Hash).hide().delay(10000 - 1000 * messageNumber).show("slow"); 
    _this.prune("#ulele"); 
} 
... 
prune: function(divid) { 
    $("#" + divid).children().each(
    function(i, elemLi) { 
     if(i >= maxMessages) 
     $(this).delay(10000).hide("slow").delay(10000).remove(); 
     } 
); 
} 

J'ai essayé quelques variations, mais l'effet final que je reçois est pas celle d'un FIFO. Les éléments disparaissent instantanément malgré les appels delay et hide("slow"). Quelqu'un a une approche plus directe?

Answer 1

Essayez ceci:

Hash = ComputeHash(message) 
if(!$("#" + Hash).exists()) { 
    var element = $("<li></li>").html(message).attr('id', Hash).hide().prependTo("#ulele"); 
    $("#" + Hash).show("slow", function() { 
    _this.prune("#ulele"); 
    }); 
} 
... 
prune: function(divid) { 
    $("#" + divid).children().each(
    function(i, elemLi) { 
     if(i >= maxMessages) 
     $(this).hide("slow", function() { 
      $(this).remove(); 
     }); 
     } 
); 
}