title: jQuery: Moving window (or FIFO) type DIV?
body: <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>