如何使用jQuery使TD正确滑动

Question

I have this

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); });
}

As you can see, I have table with TDs side by side. The script is removing each 2.5seconds a right TD and places a new TD on the left. My problem is, when removing the right TD (using the fadeOut) -> all the left TDs are jumping and replacing its place. I want them to slide smoothly to the right, like a activity stream.

<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>

Thanks

Answer 1

Table cells are not the right tool in this case; the table will go to great lengths to occupy all it's area and laying out the cells is not a simple task.

Try to achieve the effect using DIV s with display: inline; style.

Answer 2

I would look into jQuery's animate function and use it on the css attributes left and right.

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