javascript - 查询。使用延迟将 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

当函数传递给 setTimeout 时，您可以将当前元素作为 jQuery 对象作为参数传递给 setTimeout 以在 .each() 中引用当前 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>