如何使用jQuery使TD正確滑動

Question

我有這個

function loadActivity() {
    $.ajax({ url: "default.aspx?onemore=yes", dataType: 'json', context: document.body, type: "POST",
        success: function (data) { if (data == null || data == '') loadActivity(); addActivity(data.msg, data.logo, data.bag, data.date); }
    });
}

function addActivity(msg, logo, bag, date) {
    $("#activities tr:nth-child(2) td:last-child").fadeOut(2500, function () { $(this).remove(); appendNewAct(msg, logo, bag, date) });

}
function appendNewAct(msg, logo, bag, date) {
    $("#activities tr:nth-child(2)").prepend('<td style="display: none;" class="activity"><img class="bag" src="images/' + bag + '.png" /><div>' + msg + '</div><div class="time">' + date + '</div>' + (logo != '' ? '<img class="logo" src="' + logo + '" />' : '') + '</td>');
    $("#activities tr:nth-child(2) td:first-child").fadeIn(2500, function () { setTimeout(loadActivity, 2500); });
}

正如你所看到的，我有TD並排的桌子。 該腳本正在移除每個2.5秒的右TD並在左側放置一個新的TD。 我的問題是，當刪除右邊的TD（使用fadeOut） - >所有左邊的TD都在跳躍並替換它的位置。 我希望他們像活動流一樣平穩地向右滑動。

<table cellspacing="0" cellpadding="0" id="activities">
                <tbody>
                <tr><td class="activity" style="">blblblblblb
                <td>
<td class="activity" style="">lblblblblb
                <td>
<td class="activity" style="">lblblblblb
                <td>
<td class="activity" style="">blblblbl
                <td></tr>
</tbody></table>

謝謝

Answer 1

在這種情況下，表格單元格不是正確的工具； 桌子會竭盡全力占據所有區域，布置單元格並不是一件容易的事。

嘗試使用帶display: inline; DIV實現效果display: inline; 樣式。

Answer 2

我將研究jQuery的animate函數，並將其用於左右css屬性。

http://api.jquery.com/animate/