jQuery一次淡入/淡出兩個div，循環並重復

我使用高級自定義字段插件爲WordPress，激活Repeater Field以使客戶端能夠根據需要添加儘可能多的推薦內容。這些推薦內容均顯示在前端的.quote div內。但是，我只希望一次顯示兩個.quote div（按連續順序顯示），並且每次淡入/淡出兩個div。jQuery一次淡入/淡出兩個div，循環並重復

像這樣：

頁面加載：報價1 & 2所示。 7秒鐘通過：報價3 & 4顯示。 另外7秒走：報價5 & 6顯示。重複等，不依賴於有報價的數量（可能有20,5,18等），一旦達到最後兩個.quote div，它將從頭開始重新開始。

我扔在一起的代碼超級基本的和可怕稍後重這裏說明我的觀點：http://jsfiddle.net/9kg6L/

我敢肯定有這個簡單的解決方案，但我仍然一個新手寫的jQuery，所以我希望從這個經驗中學習:)

來源

2013-04-09 Trevan Hetzel

我對你的問題有點不清楚。您嘗試修復jsFiddle中的代碼是否存在問題，或者您是否嘗試在其他位置複製該功能？編輯：啊，我想你試圖使它通用，所以它工作，無論多少報價你有和重複？ – mutex 2013-04-09 21:59:40

是的，我需要它更通用，也從頭開始重複:) – 2013-04-09 22:06:47

你可以這樣來做：

var quotes = $('#container .quote'); 

function cycleQuotes() { 
    var current = quotes.filter(".active"), next; 
    if (current.length == 0 || (next = current.next().next()).length == 0) { 
     // first iteration or last, select first two 
     next = quotes.slice(0,2); 
    } 
    current.removeClass('active').fadeOut(400).promise().done(function(){ 
     next.addClass('active').fadeIn(); 
    }); 
    setTimeout(cycleQuotes,7*1000); 
} 
cycleQuotes();

http://jsfiddle.net/9kg6L/1/

這也許可以改進的，而不是顯示，如果有一個奇怪的，只有最後一個數字，顯示最後的+第一，然後循環通過從一個關閉。

來源

2013-04-09 22:15:24

somwhat near。

var interval=2000; 
var j=4 
for(var i=2;i<50;i++){ 

setTimeout(function() { 
    quote.slice(i,j).fadeOut(); 
}, interval); 
interval=interval+2000; 
     j=j+2; 
     i++; 
}

你解決它

來源

2013-04-09 22:11:30 zod

jQuery一次淡入/淡出兩個div，循環並重復

回答

相關問題