生成された順序なしリストを表示/非表示する方法

Question

thisコードを使用して、特定のユーザーから最後の5個のツイートを生成しています。

私がしようとしているのは、各ツイートを一度に1つずつ表示することです。

生成した<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をunminifiedしました。

Answer 1

あなたのfadeIn/fadeOutループは問題ありません。しかし、あなたの例では、ドキュメントが読み込まれた後でそれを実行し、非同期アクション（ツイートのフェッチ）が終了する前に、ツイートリストが空であり、その後完全なリストがレンダリングされます。

これを防ぐには、config内のcustomCallbackオプションを使用します。項目がフェッチされた後、コールバックは、それらをレンダリングし、それらを隠し、その後、フェードイン/フェードアウトループ（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; 

    })(); 
}