一个一个追加推文jquery

Question

我得到了以下代码以获得＃的4个最新推文。

$.getJSON('http://search.twitter.com/search.json?rpp=4&callback=?&q=%23jQuery&result_type=recent' ,function(data){ 

    for(var i=0;i<data.results.length;i++){ 
     var tweeter = data.results[i].from_user; 
     var tweetText = data.results[i].text; 
     var tweetText = tweetText.substring(0, 139); 

     $(tweetCont).hide().append(
     '<div class="tweet"><p><span class="tweetName"><a href="http://twitter.com/' + tweeter + '">' + tweeter + '</a></span> ' 
     + tweetText + '<br /><span class="tweetTime">' + tweetTime(data.results[i].created_at) + '</span></p></div>' 
     ).fadeIn('fast'); 
    } 

}); 

当我附加推文时，它们都会同时淡入。我喜欢让他们一个接一个地褪色，延迟时间可以说500毫秒。 fadeIn（'fast'）之前的一个简单的.delay（500）将不起作用。

Answer 1

这是类似 - 让我知道，如果它的工作原理：

$.getJSON('http://search.twitter.com/search.json?rpp=4&callback=?&q=%23jQuery&result_type=recent' ,function(data){ 

    var which = 0; 

for(var i=0;i<data.results.length;i++){ 
    var tweeter = data.results[i].from_user; 
    var tweetText = data.results[i].text; 
    var tweetText = tweetText.substring(0, 139); 

    $(tweetCont).append(
    '<div class="tweet" style="display: none;"><p><span class="tweetName"><a href="http://twitter.com/' + tweeter + '">' + tweeter + '</a></span> ' 
    + tweetText + '<br /><span class="tweetTime">' + tweetTime(data.results[i].created_at) + '</span></p></div>' 
    ); 

    if (i == (data.results.length - 1)) { 
     showTweet(); 
    } 
} 



    function showTweet() { 
     $(tweetCont).find('.tweet').eq(which).fadeIn('fast'); 
     which++; 
        if (which < data.results.length) { 
     setTimeout(showTweet, 500); 
        } 
    }; 

}); 

Answer 2

在您的示例中，您正在隐藏和淡入tweets容器（$(tweetCont)）。
你或许应该追加每推到容器中，然后在每个鸣叫与延迟（与setTimeout帮助生产）褪色：

$.getJSON('http://search.twitter.com/search.json?rpp=4&callback=?&q=%23jQuery&result_type=recent' ,function(data){ 

    for(var i=0;i<data.results.length;i++){ 
     var tweeter = data.results[i].from_user; 
     var tweetText = data.results[i].text; 
     var tweetText = tweetText.substring(0, 139); 

     var tweetHtml = '<div class="tweet"><p><span class="tweetName"><a href="http://twitter.com/' + tweeter + '">' + tweeter + '</a></span> ' 
        + tweetText + '<br /><span class="tweetTime">' + tweetTime(data.results[i].created_at) + '</span></p></div>'; 
     var $el = $(tweetHtml) 
         .hide() 
         .appendTo(tweetCont); 
     (function(el,index){ 
      setTimeout(function(){ 
       el.fadeIn('fast'); 
      },500 * index); 
     })($el,i); 
    } 

});