c# - 使用 jQuery AJAX 淡入/淡出插入/删除行

Question

我的问题是在新闻门户评论系统中使用fadeInwith 。jQuery AJAX我有#table，它是 ul 的 id，每个评论在这个 div 中被列为列表项。每当有人写新评论时，新评论必须作为淡入动画插入到网页中。（并且每当有人删除答案时，必须将列表项删除为淡出）

谢谢你。

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