javascript 有一个 Twitter 主页，如推文推送并等待新内容

Question

看看 Twitter 主页。我想复制他们的效果:一条推文被按下，然后等待大约 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 的 ul每里。 $.each 循环只是通过添加带有 display:none 的类来隐藏事件，并隐藏第三个索引之外的事件。如果未启用，所有事件都将出现。

addEvent() 函数获取事件，首先是要附加的第一个事件，最后一个要隐藏的事件，然后淡入和淡出。 slideToggle() 用于向下滑动潜水。

Answer 1

我不知道任何教程，但我可以大致告诉你他们是如何做到的。 假设您知道如何使用 setInterval()。 如果像这样 获取新推文，在空引用 div 后追加 () 其内容，使用 slipToogle() 文本并将其淡入。

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