如何在jquery中使用setTimeout一一显示我的列表组项目？

debugcn 发表于 Dev

罗希特·维尔玛

其实我想在jquery中list-group-item一一显示setTimeout。

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

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

提前致谢。

摩西·拉古齐尼

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。