Question

我刚刚为我的网站创建了一个Twitter小部件，我希望使用css3以固定的时间间隔淡出和移出最后5条或更多的推文我将div设置为60％宽度，高度为90px与我相同UL和LI如下所示......

div#twitterwidget {
    width: 60%;
    margin-right: auto;
    margin-bottom: 5px;
    margin-left: auto;
    height: 90px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    color: #EC9A20;
    font-weight: bold;
    text-shadow:0 1px 0 rgba(0,0,0,0.5)
}
div#twitterwidget ul {
    list-style:none; 
    height:90px; 
    overflow:hidden
}
div#twitterwidget ul li {
    height:90px
}

我想要实现的是使用css3动画从底部加载下一条推文！非常感谢您的帮助 Phillip Dews

这里要求的是我的HTML

<div id="twitterwidget"><script src="js/twitterWidget.js"></script>
<script>
twitterFetcher.fetch('347858782015086592', '', 5, true, false, true, '', false, handleTweets);

function handleTweets(tweets){
    var x = tweets.length;
    var n = 0;
    var element = document.getElementById('twitterwidget');
    var html = '<ul>';
    while(n < x) {
      html += '<li>' + tweets[n] + '</li>';
      n++;
    }
    html += '</ul>';
    element.innerHTML = html;
}
</script>
</div>

Answer 1

在这种情况下，我认为使用javascript（这里使用jQuery）动画你的小部件要容易得多。我不确定你是不是很想要，但这就是这个想法：

function animateWidget() {
    li = $('div#twitterwidget>ul>li:first');
    li.slideUp(1000, function(){
        li.clone().appendTo('div#twitterwidget>ul').show();
        li.remove();
    });
}
$(document).ready(function(){
    setInterval(animateWidget,1000);
});

这里做的是：

每1秒运行一次动画
使用slideUp
动画完成后，将推文放在列表末尾

请参阅 updated Fiddle

将LI动画为div

1 个答案: