jquery - jQuery少し遅れて、要素にクラスを1つずつ追加する方法は？

Question

jQuery＃ボタンをクリックしたときに少し遅れて要素にクラスを1つずつ追加する方法は？すべての要素に一度にクラスを追加するのではなく、1つずつ追加したいと思います。助けてください。前もって感謝します。

<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);
    }
}

それが機能するかどうか私に知らせてください。