Question

我需要有一个很好的过渡，我删除第一行并附加到表中的新项目。

    $.getJSON('/Home/GetRecentPosts/', { count:1 }, function(data) {
      $('#recentPosts tr:first').fadeOut(2000);
      $('#recentPosts').append($('<tr><td>'+data[0].SchoolName+'</td></tr>').hide().fadeIn(2000));
    });

这是我第一次执行getJson时的工作原理。请帮忙。感谢

Answer 1

我尝试将您想要的每项功能分成一个单独的行。如果这不是您所追求的，那么希望不应该很难调整以下代码以满足您的需求。

$.getJSON(
    '/Home/GetRecentPosts/',
    { count:1 },
      removeFirstRowAndAppendNewItem(data)
      );

function removeFirstRowAndAppendNewItem(data)
{
    console.log("in callback"); // to confirm we have reached here
    $('#recentPosts tr:first').fadeOut(2000, function() {
        $('#recentPosts tr:first').remove();
        newRow = $('<tr><td>'+data[0].SchoolName+'</td></tr>').hide();
        $('#recentPosts').append(newRow)
        newRow.fadeIn(2000));
    });
}

基本上：

淡出第一行
从DOM中删除第一行
使用隐藏它的样式创建一个新元素
将新元素附加到表格
淡入新元素

（注意：可以将这些步骤组合在一起）

Answer 2

试试这个。

$('#recentPosts tr:visible:first').fadeOut(2000);

由于

$('#recentPosts tr:first').fadeOut(2000);

会在第一次JSON调用时隐藏第一个元素。现在你再次尝试淡出不可见的第一个元素。因此，您可以使用:visible过滤器来实现预期结果。

或者，如果您想从DOM中删除元素，请尝试使用

$('#recentPosts tr:first').fadeOut(2000, function(){
    $(this).remove();
});

Answer 3

试试这个：

$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ......
});

jquery删除表中的第一行

3 个答案: