0

Web サイト用の Twitter ウィジェットを作成したばかりで、css3 を使用して設定された間隔で最後の 5 つ以上のツイートをフェードインおよびフェードアウトしたい div を UL および LI と同じ高さ 90px で幅 60% に設定しました以下に示すように...

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
  • アニメーションが完成したら、ツイートをリストの最後に入れます

更新された Fiddleを参照してください

于 2013-07-17T09:17:30.897 に答える