Question

I need some help on this on how can I animate the following:

If box1 done fading in 2000ms then that is the time to start animate the box2 the box3 and box4

$(document).ready(function(){
  $('#box1').fadeIn(2000);
  $('#box2').fadeIn(2000);
  $('#box3').fadeIn(2000);
  $('#box4').fadeIn(2000);
});

How can i do this, or give me some link. I am noob in jquery

Thank you all

Answer 1

The question’s a but unclear, but you can use .delay() to simplify this:

$(function() {
  $('#box1').fadeIn(2000);
  $('#box2').delay(2000).fadeIn(2000);
  $('#box3').delay(2000).fadeIn(2000);
  $('#box4').delay(2000).fadeIn(2000);
});

See it in action here. If you meant one then another, then another, just change the delay, like this:

$(function() {
  $('#box1').fadeIn(2000);
  $('#box2').delay(2000).fadeIn(2000);
  $('#box3').delay(4000).fadeIn(2000);
  $('#box4').delay(6000).fadeIn(2000);
});

See it in action here. Or, shorten it a bit with .each() using the index parameter it passes to the callback, like this:

$(function() {
  $('#box1, #box2, #box3, #box4').each(function(i) {
    $(this).delay(2000*i).fadeIn(2000);
  });
});

See it in action here. Or, improve it further, giving them a class so it’s more extensible, like this:

$(function() {
  $('.box').each(function(i) {
    $(this).delay(2000*i).fadeIn(2000);
  });
});

Test that version here 🙂