Блог

Я использую этот код для генерации последних 5 твитов от данного пользователя.

Что я пытаюсь сделать, так это показывать каждый твит по одному за раз.

Я изменил скрипт так, чтобы сгенерированный список <ul> имел идентификатор. Вы можете увидеть изменения, которые я внес в строку 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, чтобы вы могли видеть.

Ваш цикл fadeIn / fadeOut работает нормально. Однако в вашем примере вы запускаете его после загрузки документов и до завершения асинхронного действия (получение твитов), что означает, что список твитов пуст, а затем отображается полный список.

Чтобы предотвратить это, используйте customCallback параметры в конфигурации. После извлечения элементов обратный вызов отобразит их, скроет, а затем выполнит цикл fadeIn / fadeOut (демонстрационный вариант):

 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;

    })();
}