循环图层的可见性

Cycle visibility for layers

本文关键字：可见性 图层 循环      更新时间：2023-09-26

我有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)，但页面冻结了。

如果可能的话，我宁愿在没有第三方插件的情况下这样做。

  1. 内容之间的平滑转换
  2. 使用setInterval毫秒值来决定要显示每个部分的时间
  3. 根据需要在HTML中添加任意数量的DIV，代码就会对它们进行计数

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

您想对循环执行此操作的具体原因是什么？

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

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上的示例，并且它不受元素数量的限制。

Version1，在下一个元素中淡入，而当前可见的元素仍在淡出。如果它们位于彼此的顶部，这看起来很好。

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，只在前一个元素淡出后才淡入下一个元素。当内容不是一个放在另一个上面时（就像在fiddle示例中），这种方法效果很好。

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/

我为您举了一个小例子。希望能有所帮助：

$(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;
        }
相关文章：