显示和隐藏序列中的列表元素
[英]show and hide list elements in a sequence
问题描述
我试图在序列中显示和隐藏列表元素（我无法建议单个类），即延迟。
这是我的HTML ...
<ul id="aclass">
<?php for ($i = 0; $i < count($enties); ++$i) :
<li class="animation">
<div id="frame">
</div>
</li>
<?php endfor; ?>
</ul>
到目前为止我有
$(document).ready(function() {
function showpanel() {
$("ul#aclass > li").each(function() {
$(this).css("display", "none");
});
setTimeout(showpanel, 200)
});
我希望看到第一个li元素两秒，然后替换但第二个元素两秒钟，然后下一个等等。我不知道如何选择“下一个”li元素并在每个元素上运行该函数依次。
感谢帮助。
5 个解决方案
解决方案1
5 2015-04-26 15:38:42
创意解决方案
- 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>
解决方案2
2 2015-04-26 15:38:39
@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>
你可以玩缓和。
解决方案3
1 2015-04-26 15:32:38
您可以使用递归函数，该函数的变量会针对每次运行递增，例如
$(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"));
});
解决方案4
1 2015-04-26 15:45:53
尝试使用$ .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())
});
解决方案5
0 2015-04-26 15:47:50
看看这个：
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)
如何简洁地编写此javascript以显示/隐藏元素列表？
[英]how to concisely write this javascript to show/hide a list of elements?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.