逐条追加tweets

Question

我得到了下面的代码来获取#的4条最新tweet。

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

});

当我添加tweet时，它们都会同时淡入。我喜欢让它们一个接一个地淡入，延迟为500毫秒。在fadeIn(‘.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

在您的示例中，您在tweet容器($(tweetCont))中隐藏和淡出。

您可能应该将每个tweet附加到容器中，然后通过延迟淡入每个tweet (在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);
    }

});