Question

我试图在序列中显示和隐藏列表元素（我无法建议个别类），即延迟。

这是我的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元素持续两秒，然后被替换但是第二个被用于两秒，然后是下一个等等。我不知道如何选择＆＃34; next＆＃34; li元素并连续在每个元素上运行函数。

感谢您的帮助。

Answer 1

广告素材解决方案：

CSS：隐藏除第一个以外的所有面板（在:first-child的帮助下）
jQuery：定期将第一个孩子移到最后。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

@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>

你可以玩缓和。

Answer 3

您可以使用递归函数，该函数的变量会针对每次运行递增，例如

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

Answer 4

尝试使用$ .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())

});

Answer 5

检查出来：

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

显示和隐藏序列中的列表元素

5 个答案: