Cycle visibility for layers

I have 10 divs with class "animate" and IDs from "one" to "ten", for example:

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

I need to cycle the visibility of these ten layers in a continuous loop.

The method doesn't have to be very efficient, it just has to work OK.

I have tried running them through a for loop and fade in then fade out them one by one but they all became visible at the same time then faded out together at each iteration.

The code I used for that:

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);
}

I expected that at the first iteration the first one would be shown then hidden, then the second one, etc.

How can I show then hide them in sequence?

Another thing I'd like to know is how I can run this continuously. I tried with a while(1) but the page froze.

Would rather do this without 3rd party plugins if possible.

1. Smoothly transitions between content.
2. Use the setInterval milliseconds value to decide how long you would like to display each section.
3. Add as many DIVs as needed to the HTML, the code will count them.

Demo: http://jsfiddle.net/wdm954/QDQhu/4/

Any specific reason you want to do this with cycle?

Think the same could be accomplished with much less code:

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

Example on jsfiddle, and it isn't restricted to the number of elements.

Version 1, fades in the next element while the currently visible element is still fading out. This looks nice if they're positioned on top of each other.

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/

Version 2, fades the next element in only once the previous element has been faded out. This works well when the content isn't positioned on top of each other (like in the fiddle example).

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/

I put together a little example for you. hope it helps:

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