淡入/淡出插入/删除行与 jQuery AJAX
本文关键字:jQuery AJAX 插入 淡出 淡入 删除行 | 更新日期: 2023-09-27 18:37:27
我的问题是在新闻门户评论系统中使用fadeIn
和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>
不应在 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();
}
}