0

我刚刚为我的网站创建了一个 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>
4

1 回答 1

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
  • 动画完成后，将推文放在列表末尾

查看更新的小提琴

于 2013-07-17T09:17:30.897 回答