jquery - jQuery如何以很小的延迟将一个类一个一个地添加到一个元素中？

Question

jQuery如何在单击#button时以很小的延迟将一个类一个一个地添加到一个元素中？不要一次为所有元素添加类。我想一个一个地做。请帮忙。提前致谢。

<ul id="scroll-set">
<li class="  imVisible">Brentwood</li>
<li class="imVisible ">Antioch</li>
<li class=" imVisible">Pittsburg</li>
<li class=" imVisible">Concord</li>
<li class="imVisible ">Walnut Creek</li>
<li class=" imVisible">Danville</li>
<li class=" imVisible">San Ramon</li>

</ul>
<div id="button">

Answer 1

工作演示。

$('#button').click(function() {
  $('#scroll-set li').each(function(i) {
    var $li = $(this);
    setTimeout(function() {
      $li.addClass('imVisible');
    }, i*100); // delay 100 ms
  });
});

---

反向版本。

$('#button').click(function() {
  $($('#scroll-set li').get().reverse()).each(function(i) {
    var $li = $(this);
    setTimeout(function() {
      $li.addClass('imVisible');
    }, i*100); // delay 100 ms
  });
});

​</p>

Answer 2

您可以使用setInterval：

$(function(){
  var el = $('li');
  var index = 0;
  var timer = window.setInterval(function(){
    if  (index < el.length) {
      el-eq(index++).addClass('imVisible');
    } else {
      window.clearInterval(timer);
    }
  }, 500);
});

演示：http: //jsfiddle.net/bdUxa/

Answer 3

延迟执行 settimeout 并按索引设置类名，它应该可以工作。

var i=0;
function changeClass()
{
    if(i<document.getElementById("scroll-set").childNodes.length)
    {
        document.getElementById("scroll-set").childNodes[i].className= "whateverclassname";
        i++;
        setTimeout(changeClass,1000);
    }
}

让我知道它是否有效。