javascript pour avoir une page d'accueil twitter comme tweet feed pousser et attendre un nouveau contenu

Question

Jetez un oeil à la page d'accueil de twitters. Je veux copier l'effet qu'ils ont eu un tweet est poussé vers le bas, puis il attend comme 3 secondes, puis un nouveau tweet est poussé vers le bas, etc.

Quelqu'un sait de tous les tutoriels sur la façon d'accomplir cela.

La réponse à cette question m'a à cette solution:

$(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'); 
} 

La variable events est un ul de li « s où le class="event" est présent sur tous les li. La boucle $.each masque uniquement les événements en ajoutant une classe avec display:none et masque les événements au-delà du troisième index. Si n'est pas activé tous les événements seront présents.

La fonction addEvent() obtient les événements, d'abord le premier événement à ajouter et le dernier événement à masquer et à fondu puis à entrer et sortir. est utilisé pour faire glisser la plongée vers le bas.

Answer 1

Je ne connais aucun tutoriel, mais je peux vous dire en général comment ils le font. En supposant que vous sachiez comment utiliser setInterval(). si va comme ceci Grab nouveau tweet, append() après un div de référence vide, slideToogle() le texte et se fanent dans.

$.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(); 
     }); 
}); 

Ceci est tout le code assez bâclée et il y a beaucoup plus de choses sur ce que j'ai posté donc cela devrait vous donner une longueur d'avance. Vous devrez utiliser la fonction de rappel sur le slideToggle() pour chronométrer le fadeIn() correctement. et ils utilisent probablement un .png au fond de la boîte pour donner l'impression que les tweets disparaissent, mais qu'ils sont juste cachés.

si vous avez vos tweets ou tout objet dans un tableau, vous voulez utiliser la fonction .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(); 
     }); 
});