如何在添加到现有表之前为表行设置动画

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

Answer 2

我不太明白你想要那个动画，所以我只是稍微编辑了你的小提琴。

http://jsfiddle.net/UQUEU/17/

效果就是通过这段代码完成的：

$(row).fadeIn("slow");

这就是你要找的吗？