Видимость цикла для слоев

Question

У меня есть 10 делений с классом "animate" и идентификаторами от "одного" до "десяти", например:

<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. Добавьте столько DIV, сколько необходимо для HTML,код будет считать их.

Демо: http://jsfiddle.net/wdm954/QDQhu/4/

Answer 2

Любая конкретная причина, по которой вы хотите сделать это с помощью цикла?

Считаете, что то же самое можно сделать с помощью гораздо меньшего количества кода:

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 3

Версия 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/

Answer 4

Я собрал небольшой пример для вас. надеюсь, это поможет:

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