JQuery.使用延迟将 CSS 应用于具有类的每个元素

Question

我只是在堆栈上看了很多答案，但似乎没有什么可以解决这个问题。我正在尝试将样式应用于列表的所有元素，li使用延迟按顺序使用。该脚本仅显示列表的最后一项。怎么了？提前感谢您的帮助

$('ul li').each(function(i){
licont = this
  setTimeout(function(){
    $(licont).css('opacity','1')
  },i * 10);                  
});

li{
  opacity:0;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>ITEM 1</li>
  <li>ITEM 2</li>
  <li>ITEM 3</li>
  <li>ITEM 4</li>
</ul>

Answer 1

您可以将当前元素作为 jQuery 对象作为参数传递给setTimeout以引用.each()内的

当前 jQuery 对象，当调用传递给 setTimeout 的函数时，内引用当前 jQuery 对象

$('ul li').each(function(i) {
  setTimeout(function(el) {
    el.css('opacity', '1')
  }, i * 1000, $(this));
});

li {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>ITEM 1</li>
  <li>ITEM 2</li>
  <li>ITEM 3</li>
  <li>ITEM 4</li>
</ul>