Fade in delay on Load

javascript jquery effects delay fadein

curly_brackets · Jun 28, 2010 · Viewed 14.1k times · Source

I've stumpled on something quite nice, I've wanted to use in some upcoming project.

It's an animated opacity on load, or you can call it fade in.

I wondered if you could link some elements together (ex. 3) so element2 only starts when element1 is finished, and element3 when no. 2 is?

Or should you define a delay on element2 and multiply the delay on element3?

Answer

If you had divs, say class="faded", you could fade each in on load, each in a row like this:

$(".faded").each(function(i) {
  $(this).delay(i * 400).fadeIn();
});

You can either use .hide() to hide them on page load, like this:

$(".faded").hide()

Or do it in the CSS:

.faded { display: none; }