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

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

});

逐个添加推文Jquery

2 个答案: