我将名称、推文和时间戳作为一行添加到现有 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我试图证明这个问题。
最佳答案
遗憾的是,您无法使表格行具有动画效果。
https://stackoverflow.com/a/920480/2702894
有什么理由使用表格而不是 div 吗?
这可以通过一些“技巧”来实现,但涉及:
创建一个新表格,其中包含要在一行中添加的内容
将该表格添加与表格行大小相同的像素数
以相同的速度和时间动画该表格和现有表格
然后在最后一秒删除新的临时表并将该行添加到现有表中。
此外,这仍然不会给你带来淡入淡出效果。
正如你所看到的 - 棘手 - div 会更好:-P
关于jquery - 如何在添加到现有表之前对表行进行动画处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20948196/