javascript - jQuery:移动窗口(或 FIFO)类型 DIV？

Question

几个小时以来，我一直在尝试获得这种效果，但我必须承认我失败了。我正在尝试构建一个接受特定数量项目(比如 5)的 DIV，当添加第 6 个项目时，应删除添加的第一个项目(先进先出)。感觉应该有某种淡入和淡出。到目前为止，这是我设法写的内容:

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

我已经尝试了几个变体，但我得到的最终效果不是 FIFO 的效果。尽管有 delay 和 hide("slow") 调用，元素会立即消失。谁有更直接的方法？

Answer 1

试试这个:

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