javascript - 如何在 jquery 中使用 setTimeout 一个一个地显示我的列表组元素？

Question

实际上我想在 jquery 中使用 setTimeout 一个一个地显示 list-group-item。

现在它工作正常但一起显示，但我想一个一个地显示。我尝试过的内容如下所述。

$(document).ready(function () {
    $('.list-group-item').each(function () {
        var self = $(this);
        setTimeout(function () {
            $(self).css('display', 'block');
        }, 2000);
     });
});

.list-group { padding:10px; background:#f1f1f1;}
.list-group-item{display: none;}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
<div class="col-md-3">
<div class="list-group">
    <a href="#" class="list-group-item active">First item</a>
    <a href="#" class="list-group-item">Second item</a>
    <a href="#" class="list-group-item">Third item</a>
    <a href="#" class="list-group-item">Fourth item</a>
    <a href="#" class="list-group-item">Fifth item</a>
  </div>
  </div>
  <div class="col-md-9"></div>
 </div>

提前致谢。

Answer 1

首先，bootstrap 正在显示您的 li，因此您的代码实际上什么都不做，您的 display:none 在 css 中被忽略。所以你需要先重新hide()它们。

接下来，使用 each 的参数，它给出索引并将其乘以超时(从 0 开始，所以 +1)；

$(selector).each(function(i) {

给出:

$(document).ready(function () {
    $('.list-group-item').hide().each(function (i) {
       
        var self = $(this);
        setTimeout(function () {
            $(self).show();
        }, 500 * (i+1));
     });
});

.list-group { padding:10px; background:#f1f1f1;}
.list-group-item{display: none;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
<div class="col-md-3">
<div class="list-group">
    <a href="#" class="list-group-item active">First item</a>
    <a href="#" class="list-group-item">Second item</a>
    <a href="#" class="list-group-item">Third item</a>
    <a href="#" class="list-group-item">Fourth item</a>
    <a href="#" class="list-group-item">Fifth item</a>
  </div>
  </div>
  <div class="col-md-9"></div>
 </div>

---

500 * (i+1) 的替代方法是在一个不可见时继续循环并显示下一个。