Fade in each element - one after another

Let's say you have an array of span elements:

$("span").each(function(index) {
    $(this).delay(400*index).fadeIn(300);
});

(quick note: I think you need jQuery 1.4 or higher to use the .delay method)

This would basically wait a set amount of time and fade each element in. This works because you're multiplying the time to wait by the index of the element. The delays would look something like this when iterating through the array:

• Delay 400 * 0 (no delay, just fadeIn, which is what we want for the very first element)
• Delay 400 * 1
• Delay 400 * 2
• Delay 400 * 3

This makes a nice "one after the other" fadeIn effect. It could also be used with slideDown. Hope this helps!

How about this?

jQuery.fn.fadeDelay = function() {
 delay = 0;
 return this.each(function() {
  $(this).delay(delay).fadeIn(350);
  delay += 50;
 });
};

Well, you could setup your fade functions to trigger the "next" one.

 $("div#foo").fadeIn("fast",function(){
      $("div#bar").fadeIn("fast", function(){
           // etc.
      });
   });

But a timer may be a better system, or a function that gets them all, puts them in an array, then pops them off one at a time with a delay in between, fading them in one at a time.