結合jQuery的褪色通過列表項的多個div

我現在有這的工作的腳本，它基本上看起來通過我的列表項類名爲sponsor-'和循環通過他們在設定速度。

所以我的HTML看起來像：

<ul> 
    <li class="sponsor-1">This is sponsor one</li> 
    <li class="sponsor-2">This is sponsor two</li> 
    <li class="sponsor-3">This is sponsor three</li> 
</ul>

工作的jQuery：

$(document).ready(function() { 

var divs = $('li[class^="sponsor-"]').hide(), 
    i = 0; 

(function cycle() { 

    divs.eq(i).fadeIn(400) 
       .delay(1000) 
       .fadeOut(400, cycle); 

    i = ++i % divs.length; 

})(); 
});

這是所有好了這一點，但我需要知道我可以加入額外的列表項目到相同的功能。我還有另一個名爲「事實 - 」的名單，我也想循環。這無疑是錯誤的，但這是我的嘗試。

是我的嘗試下一個（不工作）

$(document).ready(function() { 

var sponsors = $('li[class^="sponsor-"]').hide(), 

var facts = $('li[class^="fact-"]').hide(), 

    i = 0; 

(function cycle() { 

    sponsors.eq(i).fadeIn(400), 
    facts.eq(i).fadeIn(400) 
       .delay(1000) 
       .fadeOut(400, cycle); 

    i = ++i % sponsors.length; 
    i = ++i % facts.length; 

})(); 
});

這不是工作，我只是需要一些幫助來嘗試加入更多的同樣的功能，所以我可以針對各種其他週期名單。

編輯清晰

我不尋找週期，第一個週期的贊助商則事實，我想兩個週期同時運行。對不起，有任何困惑。

來源

2012-09-26 Doidgey

在工作jQuery代碼，只是改變：

$('li[class^="sponsor-"]')

到

$('li[class^="sponsor-"], li[class^="fact-"]')

要具備兩個列表分開，只是重複的代碼（不是乾淨的方法，但它最快最簡單）。如果你改變例如divs變量此var divs = $('li[class^="sponsor-"],li[class^="fact-"]')

見工作示例here

$(document).ready(function() { 

var sponsors = $('li[class^="sponsor-"]').hide(), 

var facts = $('li[class^="fact-"]').hide(), 

var facts_i = 0; 
var sponsors_i = 0; 

(function cycle() { 


    sponsors.eq(sponsors_i).fadeIn(400) 
       .delay(1000) 
       .fadeOut(400, cycle); 


    sponsors_i = ++sponsors_i % sponsors.length; 

})(); 

(function cycle2() { 


    facts.eq(facts_i).fadeIn(400) 
       .delay(1000) 
       .fadeOut(400, cycle2); 


    facts_i = ++facts_i % facts.length; 

})(); 
});

來源

2012-09-26 08:49:40 Lee

如果你這樣做，jQuery將淡入幾個贊助商，然後切換到淡化一些事實。它實際上只是將兩個列表視爲一個對象，並不會同時運行這兩個循環。 – Doidgey

編輯答案，最簡單的方法來實現它我認爲沒有重構/重寫你的代碼從sctrach（或更好的「插件」）。 – Lee

一切工作正常。

編輯更新fiddle使用多個列表。現在兩個週期與兩個完全分開的列表同時工作。

$(document).ready(function() { 
    var sponsors = $('li[class^="sponsor-"]').hide(), 
    facts = $('li[class^="fact-"]').hide(), 
    i = 0; 

    function cycle(list,itemNbr) { 
     list.eq(itemNbr).fadeIn(400).delay(1000) 
      .fadeOut(400,function(){cycle(list,++itemNbr % list.length)}); 
    }; 

    cycle(sponsors,i); 
    cycle(facts,i);  
});

來源

2012-09-26 08:54:11

對不起，在底部看到我的修改問題。我沒有完全解釋它。我需要兩個週期同時工作，因爲兩個列表完全相互分離。 – Doidgey

我編輯了我的答案。一探究竟。 –

結合jQuery的褪色通過列表項的多個div

回答

相關問題