javascript - AJAXリクエストに応じてアニメーションでテーブル行を更新します

Question

「ライブ」リーダーボードテーブルを作成しています。X秒ごとに、AJAXリクエストがサーバーに送信され、最新のリーダーボードデータが読み込まれます。

データに変更があった場合、リーダーボードはAJAXリクエストに応じて即座に更新されます。

ただし、変更がある場合は、新しいデータをすぐに表示するのではなく、テーブルの行をすぐに再読み込みするのではなく、新しい位置にアニメーション化します。このようなことを達成するための最良の方法は何ですか？

現在、リーダーボードを次のように更新しています。

$(document).ready(function() {

    showLeaderboard();

    if (autoUpdate != false) {
        window.setInterval(function(){  
            $('#wrapper h2, #leaderboard tbody tr').remove(updateLeaderboard());
        }, reloadInterval);
    }

});

function updateLeaderboard() {

    leaderBoardType;
    numRecords;
    quizIDs;    
    topListTitle;
    latestTitle;

    $.webMethod({
        url: 'xxx',
        data: '{quizIDs:"'+quizIDs+'",numRecords:"'+numRecords+'"}',
        type: 'POST',
        cache: false,
        beforeSend: function () { 
            $('body').append('<div class="loading"></div>');
        },
        success: function (ret)
        {
            $('.loading').remove();
            $('#wrapper').prepend(topListTitle);

            $.each(ret.leaderboard,function(i){
                pos = i + 1;
                str = '<td class="position">' + pos + '</td>';
                str += '<td class="name">' + ret.leaderboard[i].first_name + '&nbsp;' + ret.leaderboard[i].last_name + '</td>';
                str += '<td class="time">' + getTime(ret.leaderboard[i].time_taken) + '</td>';
                str += '<td class="points">' + ret.leaderboard[i].points + '</td>';
                //str += '<td>' + ret.leaderboard[i].last_name + '</td>';               
                //str += '<td>' + ret.leaderboard[i].incorrect_attempts + '</td>';
                //str += '<td>' + ret.leaderboard[i].user_id + '</td>';
                $('#leaderboard tbody').append('<tr>'+str+'</tr>');
            });
        },
        error: function (response) { alert(response.responseText); }
    });
}

HTML

    <table id="leaderboard">
        <thead>
            <tr>
                <th class="position">Position</th>
                <th class="name">Name</th>
                <th class="time">Time Taken</th>
                <th class="points">Points</th>
            </tr>
        </thead>
        <tbody> 
        </tbody>
    </table>