Question

我想知道编码HTML列表项的最佳方法是在setTime之后使用延迟一个接一个地出现。所以，基本上;显示第一个李，然后第二个李，暂停3000显示最后李。像这样的东西，我可以轻松切换每个的时间。

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

FIDDLE

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

JavaScript淡出自定义时间

3 个答案: