Question

我希望列表项在页面加载时一个接一个地缓慢显示在屏幕上。这是jquery中的代码，我使用了show()但它无效。我确实在这里查找问题，其中一些人正在使用追加方法，但这不是我想要的。

HTML：

 <ul>
 <li>A</li>
 <li>B</li> 
 <li>C</li> 
</ul>

jquery的：

$("ul").find("li").each(function(i) {
  $(this).delay(500*i).show();
});

Answer 1

有两个问题。

要使其工作，首先必须隐藏li元素，然后由于您使用delay()，您需要使用动画队列的show()版本。

$("ul").find("li").each(function(i) {
  $(this).delay(500 * i).show(0);
});

ul li {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

使用类的另一种方法是

$("ul li.hidden").each(function(i) {
  $(this).delay(500 * i).queue(function(nxt) {
    $(this).removeClass('hidden');
    nxt();
  });
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="hidden">A</li>
  <li class="hidden">B</li>
  <li class="hidden">C</li>
</ul>

如何使每个<li>标签一个接一个地缓慢显示

1 个答案: