结合jQuery淡入淡出多个div的列表项

Question

问题：

我目前有一个正在运行的脚本，它基本上用“赞助商”类查看我的列表项，并以设定的速度循环浏览它们。

所以我的 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;

})();
});

这不起作用，我只需要一些帮助来尝试将更多内容添加到同一功能中，以便我可以针对各种其他循环列表。

为清晰而编辑

我不寻找第一个周期赞助商的周期，然后是事实，我希望两个周期同时运行。如有任何混淆，请见谅。

Answer 1

在工作的 jQuery 代码中，只需更改：

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

到

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

要将两个列表分开，只需复制代码（不是最简洁的方式，但它是最快和最简单的）。

$(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;

})();
});

Answer 2

如果您将divs 变量更改为此var divs = $('li[class^="sponsor-"],li[class^="fact-"]')，一切正常

查看工作示例here。

编辑 更新了 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);    
});​