jquery - 複数の要素を次々にフェードする

Question

複数のリスト要素を次々にfadeIn(500)する解決策はありますか?

<ul id="list">
 <li>test</li>
 <li>test</li>
 <li>test</li>
 <li>test</li>
 <li>test</li>
</ul>

Answer 1

次のように、LI がなくなったときに停止する再帰関数を実行できます。

function fadeLI(elem) { 
  elem.fadeIn(500, function() { fadeLI($(this).next()); }); 
}                            
fadeLI($("#list li:first")​);​

ここでチェックしてください

Answer 2

再帰関数で別の li 要素があるかどうかを確認し、ある場合はフェードインする必要があります...

function fadeInNext(el){
  if(el.next('li')){
    el.next('li').fadeIn(500,fadeInNext)
  }
}
$('...').fadeIn( 500, fadeInNext )

Answer 3

あなたはこれを行うことができます..各子を配列に追加し、配列の長さが0より大きいかどうかを確認する関数を作成し、配列の最初の項目を取得し、fadeToggleの子を取得します。次の子要素にジャンプします。shift() の詳細については、http://www.w3schools.com/jsref/jsref_shift.asp をご覧ください。

var toggleList = [];
$("#container").children().each(function() {
toggleList.push(this);
});

function fadeToggleList(toggleList) {
if (toggleList.length > 0) {
    var currentChild = toggleList.shift();
    $(currentChild).fadeToggle(50, function() {
        fadeToggleList(toggleList);
    });
}
}
fadeToggleList(toggleList);