jQuery + AJAX 附加淡入淡出答案

【问题标题】：jQuery + AJAX append with FadejQuery + AJAX 附加淡入淡出
【发布时间】：2013-01-31 10:26:35
【问题描述】：

我已按照以下教程进行操作： 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);
}

【问题讨论】：

这可以使用计数器并给 li 的 ID 来完成吗？所以最初加载了 4 个 li 并且计数 = 4。然后一个新的 LI 附加了 ID = count + 1 并且因为 ID > Count 它被淡入并且在淡入之后计数增加一所以所有具有 ID 的 LI到或小于计数不再褪色？我想这可能可行，但不知道如何实现 javascript/jQuery

标签： jquery mysql ajax fadein

【解决方案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'];
    }
       });
 });
}

【讨论】：

【解决方案2】：

<ul> 内不能有 <div>

试试这个

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

   });
 });
}

【讨论】：

【解决方案3】：

你应该试试这个：

var newLi = $("<li>Name: "+this['name']+"</li>
               <li>Age: "+this['age']+"</li><br />");

newLi.css('display','none').appendTo('ul');
$('ul li:last-child').fadeIn('slow');

【讨论】：