如何制作每个< li>标签一个接一个地缓慢出现 [英] How to make each <li> tag appear slowly one after the other

问题描述

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

I want the list item to appear on the screen slowly one after the other when the page loads.This is the code in jquery, I have used show() but it is not working. I did look up for questions here some of them are using append method but that is not what I am looking for.

html:

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

jquery:

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

推荐答案

有2个问题.

要执行此操作，首先必须隐藏li元素，然后由于使用的是delay()，因此需要使用动画队列的show()版本.

For this to work, first the li elements must be hidden, then since you are using delay(), you need to a version of show() that uses the animation queue.

$("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>标签一个接一个地缓慢出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！