Question

我的问题是在新闻门户网站评论系统中使用fadeIn和jQuery AJAX。我的#table是ul的id，每个注释都在这个div中列为listitem。每当有人写新评论时，必须将新评论作为fadeIn动画插入网页。（每当有人删除答案时，必须删除listitem作为fadeOut）

谢谢。

$.ajax({
  url: 'WebForm1.aspx',
  success: function(data){
    $('#table').html(data);
  }
});

<ul id="table" runat="server">
    <li>Comment 1</li>
    <li>Comment 2</li>
    <li>Comment 3</li>
    <li>Comment 4</li> // <--- can jQuery AJAX detect "ONLY" the inserted listitem and display it with fadeIn animation.
</ul>

Answer 1

您不应该在AJAX请求中返回整个注释表，只返回更新的注释。

然后就这样做：

success: function(data){
  $('#table').append(data).find('li').last().hide().fadeIn();
}

虽然，这只会在最后的评论中明显消失 - 所以如果你有一个以上的新评论（或没有新的评论），你需要做这样的事情：

success: function(data){
  if(data){ //or some other test to ensure there is new comments
     var $table = $('#table');
     $table.children().addClass('no-anim');
     $table.append(data);
     $table.children(':not(.no-anim)').hide().fadeIn();
  }
}

使用jQuery AJAX FadeIn / FadeOut插入/删除行

1 个答案: