javascript - 如何用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

在这种情况下，表格单元格不是正确的工具；该表格将竭尽全力占据其所有区域，并且布置单元格并不是一项简单的任务。

尝试使用 DIV 和 display: inline; 样式来实现效果。