javascript - 图层的循环可见性

Question

我有 10 个 div，其类为“animate”，ID 为“一”到“十”，例如:

<div class="animate" id="six">
    bla bla content
</div>

我需要连续循环循环这十层的可见性。

该方法不必非常高效，只要工作正常即可。

我尝试通过 for 循环运行它们，然后将它们一一淡入然后淡出，但它们同时变得可见，然后在每次迭代时一起淡出。

我为此使用的代码:

layer_ids = ['one','two','three','four','five','six','seven','eight','nine','ten'];

for(i = 0; i < 300; i++)
{
    animate_id = layer_ids[i%10];
    element_selector = '.animate#'+animate_id;
    $(element_selector).fadeIn(1500).delay(1000).fadeOut(1500);
}

我预计在第一次迭代时，第一个将显示然后隐藏，然后是第二个，依此类推。

如何按顺序显示然后隐藏它们？

我想知道的另一件事是如何连续运行它。我尝试使用 while(1) 但页面卡住了。

如果可能的话，宁愿在没有第三方插件的情况下执行此操作。

Answer 1

1. 内容之间平滑过渡。
2. 使用 setInterval 毫秒值来决定每个部分要显示多长时间。
3. 根据需要向 HTML 添加尽可能多的 DIV，代码会对它们进行计数。

演示:http://jsfiddle.net/wdm954/QDQhu/4/