javascript - JavaScriptでの遅延アニメーション

Question

lia要素で画像をスライドさせるアニメーションを遅らせたい。私は、カウンター（i）を使用してすべてのli要素を調べ、アニメーションでタイムアウトを設定して、1000 + i*50を実行できると考えました。

残念ながら、最後のli要素のみがアニメーション化されます。何故ですか？

li = $('nav ul li').get();
lic = li.length;

$('nav ul li a .icon').hide();

t = [];
for (i = 0; i < li.length; i++) {
    var obj = $('nav ul li')[i];

    t[i] = setTimeout(function() {
        $(obj).children('a').children('.icon').slideDown();
    }, 1000 + i * 50);

    delete obj;
}

Answer 1

これで問題ありません。

jsBin デモ

$('nav ul li a .icon').hide();

$('nav ul li').each(function( i ){       
    $(this).find('.icon').delay(i*300).slideDown();    
});

Answer 2

これを試してみてください。これは完全なコードではなく、テストもされていません。ロジックはこちらからお借りします。

$('nav ul li').each(function {
    $(this).find("a>.icon").hide();
    t[i] = setTimeout(function() {
        $(this).find("a>.icon").slideDown();
    }, 1000 + i * 50);
});