CODEWITHSUNDEEP
javascriptjquery
Lieutenant Dan
Lieutenant Dan

Reputation: 8284

JavaScript fadeIn custom times

I'm wondering the best way to code HTML list-items to appear one after another using delays after a setTime. So, essentially; Show first li, then second li, pause for 3000 show last li. Something like this, where I can easily toggle the times for each.

<li class="final_1">

Does something like this seem close and a good approach?

$(document).ready(function() {

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

Upvotes: 0

Views: 75

Answers (3)

Praveen
Praveen

Reputation: 56519

Similar to yours, I have crossed a task using delayed toggle() in jQuery. 

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

Also I am having an demo in JSFiddle

EDIT: With reference to adeneo's answer, check for the last-child in li and increase the timer.

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

Upvotes: 0

Maxx
Maxx

Reputation: 4072

Since you're already using jQuery, this should work....

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

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

Upvotes: 1

adeneo
adeneo

Reputation: 318312

With a simple loop :

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

FIDDLE

Upvotes: 4

Related Questions