Menu
I'm trying to show and hide list elements (that I can't advice a individual class to) in a sequence, i.e. delayed.
this is my html…
<ul id="aclass">
<?php for ($i = 0; $i < count($enties); ++$i) :
<li class="animation">
<div id="frame">
</div>
</li>
<?php endfor; ?>
</ul>
so far I have
$(document).ready(function() {
function showpanel() {
$("ul#aclass > li").each(function() {
$(this).css("display", "none");
});
setTimeout(showpanel, 200)
});
I want to see the first li element for two seconds, then replaced but the second one for two seconds, then the next one etc. I don't know how to select the "next" li element and to run the function on each element successively.
Thanks for help.
727
Creative solution:
:first-child)$(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>@tgifred In the end, I managed to find the working solution. It is like this. I hope it helps.
<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>
In case you want to have visible only one element at a time, you could do something like this:
<script>
$(function() {
var elements = $("ul#aclass li");
elements.hide();
elements.each(function (i) {
$(this).delay(2000 * i++).fadeIn(20).fadeOut(1800);
});
});
</script>
And you can play with the easing.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
