javascript - JavaScript フェードイン カスタム時間

Question

setTime の後に遅延を使用して、HTML リスト項目を次々に表示するようにコーディングする最良の方法を考えています。つまり、本質的に; 最初の li を表示し、次に 2 番目の li を表示し、3000 の間一時停止して、最後の li を表示します。このようなもので、それぞれの時間を簡単に切り替えることができます。

<li class="final_1">

このようなものは、近くて良いアプローチに見えますか?

$(document).ready(function() {

    final_1.delay(5000).fadeIn()}$
    });
});

Answer 1

単純なループの場合:

$('.final_1').each(function(i,ele) {
    $(ele).delay(i*3000).fadeIn('slow');
});

フィドル

Answer 2

すでにjQueryを使用しているので、これでうまくいくはずです....

var timers = [5000, 5000, 5000, 3000]; //allows setting of specific times for each 

$(".final_1").each(function(index){
   $(this).delay(index * timers[index]).fadeIn();
});

Answer 3

あなたと同様に、遅延を使用してタスクを超えtoggle()ましたjQuery。

$(".final_1").each(function(i, e) {
     $(this).delay(i).toggle("slide", { direction: "left" }, 2000);
    });

また、私はJSFiddleでデモを行っています

編集：adeneoの回答を参照して、last-childインを確認しli、タイマーを増やします。

$('.final_1').each(function(i,ele) {
    var dt = 1000;
    if($(this).is(':last-child')) // To check the last child in li
        dt = 2000;                // and increase the timer
    $(ele).delay(i*dt).fadeIn('slow');    
});

JSFIDDLE