jQuery + AJAX 追加淡入淡出

Question

我遵循了以下教程: http://technotip.com/2208/insert-data-into-mysql-jquery-ajax-php/和 http://technotip.com/2298/fetchextract-data-from-database-without-refreshing-webpage-jquery/

这些都很好用。

我的问题是，我该如何着手创建以下过程:

当页面加载时，所有现有记录都会正常显示在 ul 标记中。但是一旦页面加载完毕，所有新附加的 li 项都会淡入。

function updates() {
 $.getJSON("pullsql.php", function(data) {
   $("ul").empty();
   $.each(data.result, function(){
    //$("ul").append("<li>Name: "+this['name']+"</li><li>Age: "+this['age']+"</li><br />");
    $('<div></div>').appendTo("ul").hide().append("<li>Name: "+this['name']+"</li><li>Age: "+this['age']+"</li><br />").fadeIn('slow');
   });
  });
 }

到目前为止，我已经尝试将 updates() 函数更改为上面的(原始行已注释掉，更改了它下面的行)。

这导致整个 ul 列表每 200 毫秒淡入一次(更新计时器)，但我需要每个 li 只淡入一次。

提前感谢您提供的任何帮助，很高兴被重定向到适当的教程以帮助我学习，而不仅仅是被输入代码。

***编辑***

到目前为止，我认为以下函数导致答案出现问题:

    $(document).ready( function() {
 done();
});

function done() {
      setTimeout( function() { 
      updates(); 
      done();
      }, 200);
}

Answer 1

我已经设法使用以下方法让它工作 - 感谢提供 .new 类想法但此后删除了他的答案的人。这通过使用 MySQL 中的自动增量 id 来实现。对于 UPDATE 而不仅仅是 INSERT 的记录，我想我可以在更新时添加一个时间戳，并将 var ulid = 设置为以前的记录时间戳

var ulid = 0;
function updates() {
  $.getJSON("pullsql.php", function(data) {
     $("ul").empty();
     $.each(data.result, function(){

     if (ulid >= this['id']){
        $("ul").append("<li>Name: "+this['name']+"</li><li>Age: "+this['age']+"</li><br />");
     } else {
        $("ul li").removeClass("new"); 
        $("ul").append('<li class="new">Name: '+this['name']+'</li><li class="new">Age: '+this['age']+'</li><br />');
        $("ul li.new").fadeIn('slow');
        ulid = this['id'];
    }
       });
 });
}