Question

我正在使用this代码生成来自给定用户的最后5条推文。

我要做的是一次显示一条推文。

我修改了脚本，以便生成的<ul>具有ID。您可以看到我在脚本第6行所做的更改。

以下是我使用的脚本：

$(document).ready(function () {
var tweets = $('#tweetlist li').hide();
    i = 0;

(function cycle() { 

    tweets.eq(i).fadeIn(600)
              .delay(4000)
              .fadeOut(600, cycle);

    i = ++i % tweets.length;

})();
});

由于某种原因它只是不起作用。我在两个脚本之前调用了jquery，但列表仍显示所有项目。

以下是我一直在使用的jsfiddle： http://jsfiddle.net/wulfmann/qst8atkk/1/

奇怪的是，如果我自己构建列表就行了。

我有一种感觉，我错过了一些基本的东西。不可否认，我没有逐行浏览twitter脚本代码，所以我可能错过了那里的东西。

我现在正在学习jquery和javascript，所以我只是想确保我不会错过一些基本的东西。

编辑：在附加的jsfiddle中，我已经取消了js，以便你可以看到。

Answer 1

你的fadeIn / fadeOut循环很好。但是，在您的示例中，您在文档加载后运行它，并在异步操作（提取推文）结束之前运行它，这意味着推文列表为空，然后呈现完整列表。

要防止使用配置中的customCallback选项。获取项目后，回调将呈现它们，隐藏它们，然后执行fadeIn / fadeOut循环（demo）：

var configProfile = {
  "profile": {"screenName": 'twitter'},
  "maxTweets": 5,
  "enableLinks": true, 
  "showUser": true,
  "showTime": true,
  "showImages": false,
  "customCallback": handleTweets,
  "lang": 'en'
};
twitterFetcher.fetch(configProfile);

function handleTweets(tweets) {
    var x = tweets.length;
    var n = 0;
    var element = document.getElementById('tweets');
    var html = '<ul>';
    while(n < x) {
      html += '<li>' + tweets[n] + '</li>';
      n++;
    }
    html += '</ul>';
    element.innerHTML = html;

    var tweets = $(element).find('li').hide();

    var i = 0;

    (function cycle() { 

      tweets.eq(i).fadeIn(600)
        .delay(4000)
        .fadeOut(600, cycle);

      i = ++i % tweets.length;

    })();
}

如何显示/隐藏生成的无序列表

1 个答案: