[英]How to show/hide an unordered list that is generated
我正在使用此代碼從給定用戶生成最后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縮小了,以便您可以看到。
您的fadeIn / fadeOut循環很好。 但是,在您的示例中,您是在文檔加載之后,異步操作(獲取推文)結束之前運行它的,這意味着推文列表為空,然后呈現完整列表。
為了防止這種情況, customCallback
在配置中使用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;
})();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.