Search code examples
javascriptjquerycssfadein

Applying a javascript fade-in to 4 divs with a 2 second gap

I am trying to apply a javascript fade-in to 4 divs on a page named div1 div2 div3 and div4 (original I know) However I can not get the code below to work. I also need each fade in to have a 2 second gap between each one. Can somebody please show me how? This tiny bit of code is driving me mad now!

$(document).ready(function() {
$('#div1,div2,div3,div4').ready(function() {
    $(this).css('opacity', .4).fadeTo(2000, 1.0);
}).ready(function() {
    $(this).fadeTo(2000, 0.4);
});
});
Solution

  • This fades #div1, #div2, #div3 and #div4 to 0 opacity in 2 seconds with a 2 seconds delay.

    $(document).ready(function() {
$('#div1').delay(2000).fadeTo(2000, 0);
$('#div2').delay(4000).fadeTo(2000, 0);
$('#div3').delay(6000).fadeTo(2000, 0);
$('#div4').delay(8000).fadeTo(2000, 0);
});

    JSFiddle demo