javascript - JavaScript 淡入自定义时间

Question

我想知道将 HTML 列表项编码为在 setTime 之后使用延迟一个接一个出现的最佳方法。所以，本质上；显示第一个 li，然后显示第二个 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-childinli并增加计时器。

$('.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