jQuery一个一个地显示列表项循环不起作用答案

【问题标题】：jQuery Showing List Item One by One Looping Not WorkingjQuery一个一个地显示列表项循环不起作用
【发布时间】：2021-11-19 20:46:03
【问题描述】：

基本上，一旦页面加载，我想一一显示列表项，一旦全部显示，我想隐藏所有内容并再次一一重复显示这些项目。

请在下面查看我的代码并告诉我我做错了什么。

jQuery(document).ready(function($){

    setInterval(
      (function x() {
        var delay = 1000;
        $('ul.banner-point > li').each(function() {
          $(this).hide().delay(delay).fadeIn(1850).addClass('text-bigger').delay(100).queue(function(next) {
            $(this).removeClass('text-bigger');
            next();
          });
          delay += 1000;
        });
      })(), 5000);
 
});

.text-bigger {
    font-size: 18px;
    color: #ed3b49;
}

ul.banner-point li {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="banner-point">
    <li style="font-weight: 400;"><span>Point 1</span></li>
    <li style="font-weight: 400;"><span>Point 2</span></li>
    <li style="font-weight: 400;"><span>Point 3</span></li>
    <li style="font-weight: 400;"><span>Point 4</span></li>
    <li style="font-weight: 400;"><span>Point 5</span></li>
    <li style="font-weight: 400;" ><span>Point 6</span></li>
</ul>

我知道这个问题：Fade in each li one by one。但是，那里的解决方案不包括循环。我现在要做的是包含一个循环。

【问题讨论】：

标签： jquery animation setinterval

【解决方案1】：

如果我理解你的问题，试试这个：

jQuery(document).ready(function ($) {
    function x() {
        var delay = 1000;
        var li_count = $('ul.banner-point > li').length -1;
        $('ul.banner-point > li').each(function (i) {
            $(this).hide().delay(delay).fadeIn(1850).addClass('text-bigger').delay(100).queue(function (next) {
                $(this).removeClass('text-bigger');
                if (li_count == i) x();
                next();
            });
            delay += 1000;
        });
    }
    x();
});

.text-bigger {
     font-size: 18px;
     color: #ed3b49;
}

ul.banner-point li {
     display: none;
}

<ul class="banner-point">
    <li style="font-weight: 400;"><span>Point 1</span></li>
    <li style="font-weight: 400;"><span>Point 2</span></li>
    <li style="font-weight: 400;"><span>Point 3</span></li>
    <li style="font-weight: 400;"><span>Point 4</span></li>
    <li style="font-weight: 400;"><span>Point 5</span></li>
    <li style="font-weight: 400;"><span>Point 6</span></li>
</ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

【讨论】：