一条一条地追加推文 Jquery答案

【问题标题】：Append tweets one by one Jquery一条一条地追加推文 Jquery
【发布时间】：2012-04-14 06:38:39
【问题描述】：

我得到了以下代码来获取 # 的 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) 将不起作用。

【问题讨论】：

标签： jquery json twitter

【解决方案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);
                    }
    };

});

【讨论】：

【解决方案2】：

在您的示例中，您在推文容器中隐藏和淡出 ($(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);
    }

});

【讨论】：

它们会被附加，但不会淡入。
好像没有追加。
@timG 抱歉，我不小心将tweetCont 替换为tweetHtml。查看更新。