JavascriptをつぶやきフィードプッシュのようにTwitterのホームページを持っているし、Twitterのホームページを見てみましょう新しいコンテンツ

Question

を待ちます。つぶやきが押されたときの効果をコピーして、3秒間待ってから新しいツイートが押し下げられるなどします。

これを達成するためのチュートリアルは誰にも分かります。

この質問への答えは、この溶液に私を得た：

$(document).ready(function() { 
    var events = $('.event') 
    setInterval('addEvent()',3000); 
    $.each (events, function(i) { 
     if (i > 2) { 
      $("#" + this.id).addClass('hidden_event'); 
     } 
    }) 
}); 

function addEvent() { 
    var events = $('.event'); 
    var event_to_append = events[events.length - 1]; 
    var event_to_remove = events[events.length - 2]; 
    $('#events').prepend(event_to_append); 
    $("#" + event_to_append.id).slideToggle('slow'); 
    $("#" + event_to_remove.id).fadeOut('fast'); 
} 

events変数はclass="event"は、すべてのli上に存在するli年代のulです。 $.eachループだけdisplay:noneとクラスを追加することによって、イベントを非表示にし、第3のインデックスを越えてイベントを非表示にします。有効になっていないと、すべてのイベントが表示されます。

addEvent()関数は、最初のイベント、追加する最初のイベントと非表示にするには、最後のイベントを取得し、内外に、その後フェード。 slideToggle()を使用してダイビングをスライドさせます。

Answer 1

私は、任意のチュートリアルを知っていないが、私は、彼らはそれをやっているか、一般的にあなたを伝えることができます。 あなたは）（のsetIntervalを使用する方法を知っていると仮定すると。 場合、これはすべてのかなりずさんなコードであり、より行くがたくさんあるこの グラブ新しいつぶやきのようになり、追加（）、それは空の参照のdiv後、slideToogle（）テキストと。

$.post("/API/locationForNextTweet", null ,function(data){ 
     var tweetid = "tweet-id-" + data.TweetID; 
     var tweet = "<div id='" + tweetid + "' class='twtr-tweet'><div class='innertweet'>" + data.Tweet + "</div></div>"; 
    $(".twtr-tweet").append(tweet); 
    $("#" + tweetid).slideToggle(function(){ 
      $("#" + tweetid).fadeIn(); 
     }); 
}); 

でそれをフェード私はあなたが頭のスタートを与える必要がありますので、私は何を投稿した。 slideToggle（）でコールバック関数を使用してfadeIn（）を正しく実行する必要があります。そして彼らはおそらくそれがフェードアウトしているが、実際には隠されているツイートのように見えるようにボックスの下部にあるの.pngを使用しています。

あなたは配列にあなたのつぶやきまたは任意のオブジェクトを持っている場合、あなたは（.eachを使用したいと思う）機能

var tweets = [<%your data source array here%>] 
$.each(tweets, function(){ 
    var tweetid = "tweet-id" + this['TweetID']; 
    var tweet = "<div id='" + tweetid + "' class='twtr-tweet'><div class='innertweet'>" + this['Tweet'] + "</div></div>"; 
    $(".twtr-tweet").append(tweet); 
    $("#" + tweetid).slideToggle(function(){ 
      $("#" + tweetid).fadeIn(); 
     }); 
});