jQuery: Moving window (or FIFO) type DIV?
<p>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, the 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:</p>

<pre><code>...
//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 = $("&lt;li&gt;&lt;/li&gt;").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 &gt;= maxMessages) 
        $(this).delay(10000).hide("slow").delay(10000).remove();
      }
  );
}
</code></pre>

<p>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 <code>delay</code> and <code>hide("slow")</code> calls. Anyone has a more straightforward approach?</p>
