показать и скрыть элементы списка в последовательности

Я пытаюсь показать и скрыть элементы списка (которые я не могу дать конкретному классу) в последовательности, то есть отложить.показать и скрыть элементы списка в последовательности

это мой HTML ...

<ul id="aclass"> 
    <?php for ($i = 0; $i < count($enties); ++$i) : 
    <li class="animation"> 
     <div id="frame"> 
      &nbsp; 
     </div> 
    </li> 
    <?php endfor; ?> 
</ul>

до сих пор у меня есть

$(document).ready(function() { 
    function showpanel() { 
    $("ul#aclass > li").each(function() { 
     $(this).css("display", "none"); 
}); 
    setTimeout(showpanel, 200) 
});

Я хочу, чтобы увидеть первый элемент LI в течение двух секунд, а затем заменить, но второй один в течение двух секунд, затем следующий и т. д. Я не знаю, как выбрать «следующий» элемент li и запустить функцию для каждого элемента последовательно.

Спасибо за помощь.

источник

2015-04-26 tgifred

Вы можете использовать рекурсивную функцию с переменной, которая получает приращение для каждого прогона, что-то вроде

$(document).ready(function() { 
    (function showpanel(i, elems) { 
     i = i === elems.length-1 ? 0 : i+1; 
     elems.eq(i).show(0).delay(1000).hide(0, function() { 
      showpanel(i, elems); 
     }); 
    })(-1, $("ul#aclass > li")); 
});

FIDDLE

источник

2015-04-26 15:32:38 adeneo

Расчет 'i' может быть упрощена немного: http://jsfiddle.net/ft9tb2cb/1/ (I» m интересно, почему '1' вместо' 0' для скорости анимации?) – Tomalak

@Tomalak - '0' также работает, дело в том, что для jQuery должно быть задано число, чтобы добавить его в очередь FX и сделать 'delay', и я обычно использую' 1', поскольку одна миллисекунда не заметна, и мне становится понятнее, что анимированная версия show/hide используется и т. д. Я изначально сделал [** this **] (http://jsfiddle.net/adeneo/ft9tb2cb/2/), но попытался сделать его, по крайней мере, немного сложнее, разделив его маленький. – adeneo

Хм, я понимаю, что если вы передадите '0', анимированная версия show/hide не будет использоваться - по крайней мере, мой вариант переключает панели без визуального джиттера (на самом деле на моей машине это замечательно). – Tomalak

@tgifred В конце концов, мне удалось найти рабочее решение. Это так. Я надеюсь, что это помогает.

<html> 
<head> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 

<body> 
<ul id="aclass"> 
    <li class="animate">Panel 1</li> 
    <li class="animate">Panel 2</li> 
    <li class="animate">Panel 3</li> 
    <li class="animate">Panel 4</li> 
    <li class="animate">Panel 5</li> 
</ul> 

<script> 
    $(function() { 
     var elements = $("ul#aclass li"); 
     elements.hide(); 
     elements.each(function (i) { 
      $(this).delay(2000* i++).fadeIn(2000); 
     }); 

    }); 
</script> 
</body> 
</html>

В случае, если вы хотите иметь видны только один элемент в то время, вы могли бы сделать что-то вроде этого:

<script> 
    $(function() { 
     var elements = $("ul#aclass li"); 
     elements.hide(); 
     elements.each(function (i) { 
      $(this).delay(2000 * i++).fadeIn(20).fadeOut(1800); 
     }); 

    }); 
</script>

И вы можете играть с разрядкой.

источник

2015-04-26 15:38:39

Этот код не запускается, и ответ останавливается посредине предложения. Я не уверен, как он собрал 2 upvotes. – Tomalak

Нет, никогда не будет работать, это цикл, который одновременно переключает класс на все элементы, и он делает это каждые две секунды, по крайней мере, если бы были исправлены синтаксические ошибки. – adeneo

Вы правы, мой код не решает проблему. В то время это означало намекнуть в направлении, которое может решить проблему. Мой код никогда не утверждал, что это сработает. Но это будет то, что я попробую. И это было использование классов CSS. Я все еще думаю, что есть что-то, и я вернусь к решению, когда у меня будет время. На данный момент я отредактирую ответ и нахожусь в верхней части кода, который работает, и почти делает то, что его просили сделать, но на самом деле. Мне нужно думать немного больше о реальном решении, но реальное решение не представлено, из того, что я вижу. –

Креативное решение:

CSS: Скрыть все панели, кроме первого (с помощью :first-child)
JQuery: держать перемещение первого ребенка до конца периодически.

$(document).ready(function() { 
 
    var panelInterval; 
 

 
    panelInterval = setInterval(function() { 
 
     $("ul#aclass > li:first-child").appendTo("ul#aclass"); 
 
    }, 200) 
 
});

ul#aclass > li { 
 
    display: none; 
 
} 
 
ul#aclass > li:first-child { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="aclass"> 
 
    <li>Panel 1</li> 
 
    <li>Panel 2</li> 
 
    <li>Panel 3</li> 
 
    <li>Panel 4</li> 
 
    <li>Panel 5</li> 
 
</ul>

источник

2015-04-26 15:38:42 Tomalak

Nice мысли. Но вы действительно должны использовать только технологию переключения элементов DOM, когда это единственный вариант. В этом случае это не единственный вариант. – bowheart

Можете ли вы объяснить, почему это плохая идея? – Tomalak

Я не думаю, что это трудно понять. Переключение элементов DOM (особенно в таком случае, когда элементы, по-видимому, выбраны только как дочерние элементы родителя) означает, что все в вашем CSS/javaScript, которое выбирает/действует на эти элементы, также должно переключаться. Если какой-либо из этих панелей требует применения CSS или jQuery специально для них, быстро их будет очень сложно выбрать. – bowheart

Попробуйте использовать $ .next().

$(document).ready(function() { 

    function showpanel($toShow, $toHide) { 
     if ($toHide) { 
      $toHide.hide(); 
     } 
     $toShow.show(); 
     setTimeout(showpanel, 200, $toShow.next(), $toShow) 
    }); 

    showpanel($("ul#aclass > li").hide().first()) 

});

источник

2015-04-26 15:45:53 HDN

проверить это:

function showpanel(current, elems) { 
    return function() { 
     current = current < elems.length - 1 ? current + 1 : 0; 
     elems.hide().eq(current).show(); 
    } 
}; 

setInterval(showpanel(0, $("#aclass li")), 200)

DEMO

источник

2015-04-26 15:47:50 marsh

показать и скрыть элементы списка в последовательности

ответ

Смежные вопросы