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'];
    }
       });
 });
}

Answer 2

<div>

内无法<ul>

试试这个

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');

   });
 });
}

Answer 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');

jQuery + AJAX附加了Fade

3 个答案: