Question

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

＆＃13;

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

＆＃13;

li{
  opacity:0;
  }

＆＃13;

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

＆＃13;

Answer 1

当调用传递给setTimeout的函数时，可以将当前元素作为jQuery对象作为参数传递给.each()以引用setTimeout中的当前jQuery对象

＆＃13;

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

＆＃13;

li {
  opacity: 0;
}

＆＃13;

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

＆＃13;

JQuery的。使用延迟将类应用于每个元素

1 个答案: