jQuery: Moving window (or FIFO) type DIV?

I have been trying to get this effect for a couple of hours now and I must admit I am failing at it. I am trying to construct a DIV that accepts a particular number of items (say 5), when the 6th item is added, th开发者_StackOverflowe first item that was aded should be removed (first-in-first-out). The feel should have some kind of a fadeIn and fadeOut. Here's what I managed to write till now:

...
//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();
      }
  );
}

I've tried a couple of variations but the final effect I am getting is not that of a FIFO. The elements disappear instantaneously despite the delay and hide("slow") calls. Anyone has a more straightforward approach?

---

Try this:

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();
        });
      }
  );
}