jquery - 如何在添加到现有表之前对表行进行动画处理

Question

我将名称、推文和时间戳作为一行添加到现有 HTML 表中。我正在使用 codebird-js 来获取推文。我现有的代码只是将新推文添加到表中。但我想在新表行添加到顶部时向其添加缓慢的滑动动画。目的是给观看者留下这样的印象:现有行已被下推，以便为新行腾出空间。到目前为止还无法做到这一点。任何帮助将不胜感激。提前致谢。

这是 HTML

<input type="text" id="tweet-form" placeholder="search text...">
<button id="tweet-button" onclick="showTweets();">Get Tweets</button>

<div id="tweet-rows">
    <table></table>
</div>

CSS

#tweet-rows {
    display: none;
}

JavaScript

function showTweets() {
    var tweetText = $('#tweet-form').val();
    console.log(tweetText);

    var cb = new Codebird;
    cb.setConsumerKey(
           "CONSUMER_KEY", 
           "CONSUMER_SECRET"
    );

    cb.setToken(
            "ACCESS_TOKEN", 
            "ACCESS_TOKEN_SECRET"
    );

    cb.__call(
        "search_tweets", {
         q : tweetText,
         },
     function (reply) {

       for(var i=reply.statuses.length-1; i>=0; i--) {

         var name = reply.statuses[i].user.name;
         var tweet = reply.statuses[i].text;
         var timestamp = reply.statuses[i].created_at;

         $('#tweet-rows > table').prepend('<tr><td>@' + name + '</td><td>' + tweet + '</td><td>' + timestamp + '</td></tr>');

        //console.log('@' + name + ' : ' + tweet + ' ' + timestamp);

        }

       $('#tweet-rows').show();  

     }, true
    );
}

我已经做好了这个fiddle我试图证明这个问题。

Answer 1

遗憾的是，您无法使表格行具有动画效果。

https://stackoverflow.com/a/920480/2702894

有什么理由使用表格而不是 div 吗？

这可以通过一些“技巧”来实现，但涉及:

创建一个新表格，其中包含要在一行中添加的内容

将该表格添加与表格行大小相同的像素数

以相同的速度和时间动画该表格和现有表格

然后在最后一秒删除新的临时表并将该行添加到现有表中。

此外，这仍然不会给你带来淡入淡出效果。

正如你所看到的 - 棘手 - div 会更好:-P