Question

我有10个div，类“animate”，ID从“one”到“ten”，例如：

<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

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

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

Answer 2

我为你准备了一个小例子。希望它有所帮助：

$(function () {

        function animateBoxes(targetElement, delay) {
            var anims = targetElement;
            var numnberOfAnims = anims.size();

            anims.eq(0).addClass('visible').fadeIn();
            setInterval(function () {

                $('.visible').fadeOut(function () {
                    $(this).removeClass('visible').next().addClass('visible').fadeIn();
                    if ($(this).index() + 1 == numnberOfAnims) {
                        anims.eq(0).addClass('visible').fadeIn();
                    }
                });
            }, delay);
        }

        animateBoxes($('.animate'), 2000);

    });

HTML：

<div class="animate visible">
    Content 1
</div>
<div class="animate">
    Content 2
</div>
<div class="animate">
    Content 3
</div>
<div class="animate">
    Content 4
</div>
<div class="animate">
    Content 5
</div>

CSS：

.animate 
    {
        display:none;
        border:solid 1px red;
        padding:30px;
        width:300px;
        }

Answer 3

您希望通过循环执行此操作的具体原因是什么？

认为可以用更少的代码完成同样的事情：

var els = $("div.animate").hide();
    function rotate(){

        for (var i=0;i<els.length;i++){
            $(els[i]).delay(i*1000).fadeIn(1500).delay(1000).fadeOut(1500);
        }
          setTimeout(rotate, i*1000);
    }
    rotate();

jsfiddle上的示例，并不限于元素数量。

Answer 4

版本1，淡入下一个元素，而当前可见元素仍然淡出。如果它们彼此叠加，这看起来很不错。

var roller = $('.animate'),
    curr = roller.length-1;

function fadeOut() {
    roller.eq(curr).fadeOut(1500, fadeIn);
}

function fadeIn() {
    curr = (curr+1) % roller.length;
    roller.eq(curr).fadeIn(1500, fadeOut);        
}

fadeOut();

http://jsfiddle.net/kaFnb/2/

版本2，仅在前一个元素淡出后才淡化下一个元素。当内容没有彼此叠加时（例如在小提琴示例中），这很有效。

var roller = $('.animate'),
    curr = roller.length-1;

function toggleNextRoller() {
    roller.eq(curr).fadeOut(1500);
    curr = (curr+1) % roller.length;
    roller.eq(curr).fadeIn(1500, toggleNextRoller);
}

toggleNextRoller();

http://jsfiddle.net/kaFnb/1/

循环图层的可见性

4 个答案: