Jquery 如何在对现有表进行预处理时设置表行的动画

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

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

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

函数showteets（）{
var tweetText=$（'#tweet form'）.val（）；
console.log（tweetText）；
var cb=新的编码鸟；
塞特尔基(
“消费者密钥”，
“消费者的秘密”
);
cb.setToken(
“访问令牌”，
“访问\u令牌\u机密”
);
cb.\u呼叫(
“搜索推特”{
问：推文，
},
职能（答复）{
对于（变量i=reply.statuses.length-1；i>=0；i--）{
var name=reply.status[i].user.name；
var tweet=reply.status[i]。文本；
var timestamp=reply.statuses[i]。已在处创建；
$（'#tweet rows>table'）。前缀（'@'+name+''+tweet+''+timestamp+''）；
//log（'@'+name+'：'+tweet+''+timestamp）；
}
$（“#推特行”）.show（）；
}是的
);
}

---

我在尝试演示问题的地方编写了这个程序。

不幸的是，您无法使表格行动画化

是否有任何理由使用表而不是div

这可以通过一些“诡计”实现，但包括：

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

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

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

然后在最后一秒钟删除新的临时表，并将该行前置到现有表中

此外，这仍然不会给你一个淡入淡出的效果

---

正如你所看到的-棘手的-div会更好：-p

我真的不明白你想要怎样的动画，所以我只是编辑了一下你的小提琴

效果是通过以下代码实现的：

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

---

这就是你想要的吗？

如果你想要一个向下滑动的动画，就像格雷厄姆·里奇（Graham Ritchie）说的那样，这在表格行中是不可能的，如果你想要的话，可以使用divs。我不想要淡入动画。实际上，当新行占据顶部位置时，我希望降低现有行向下移动的速度。无论如何，我会尝试与div的动画。您能给出一些关于在这个特殊情况下使用div的代码示例吗？那个用例有什么问题吗？我正在尝试做一些非常相似的事情，基本上除了优雅地向下移动现有的div之外，我所有的工作都在进行。嗨，丹，最好的办法是创建一个小提琴，并将其作为一个新问题发布-我会留意它。如果您正在使用div和jQuery，只需使用

.slideDown（500）

say（so

$（“#container”）.prepend（'Row HTML IN HERE'）.hide（）.slideDown（500）；

将div预先添加到容器中即可。这是一个新的提琴，谢谢

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