Paul Irish

I won't have you diss my way of doing it on IRC ;)

Here it another way of doing a recursive call with jQuery:

 
$(function(){
  recursiveFunction();
});
 
 
function recursiveFunction(){
  $('div:not(.recursiveRun):first').animate({width: '100px'},function(){
  $(this).addClass('recursiveRun');
    recursiveFunction();
  });
}

It might not be all that pretty and jQuery-like, but it still works.. :)

Another way – works on any jquery object(not just on sibling elements):

(function hidenext(jq){
    jq.eq(0).fadeOut("fast", function(){
        (jq=jq.slice(1)).length && hidenext(jq);
    });
})($('div#bodyContent a'))

@Paul Irish
I'm trying to develop a similar effect of the ted.com site where elements load sequentially over time. Can this solution work for that with times (500, 1000, 1200) instead of range settings (slow, medium, fast)?

i have just achieved the effect by a simple computer science 101 recursive function:

$(document).ready({
//say you have a div id=text with say 10 paragraphs... first hide them:
$("#text p").hide();
 
//then call the recursive function on the first p tag
fadeUpR($("#text p:first"));
 
 
});
 
function fadeUpR(e){
 
	$(e).fadeIn(500, function(){
		if($(e).next("p").length != 0){
			fadeUpR($(e).next("p"));
		}
	});
 
}

another prettier way to do it, rather than waiting for the callback to fire, is to start each element fading up at a certain increment, say 200ms apart each, but have each element take longer than the triggering increment to complete its fade up. this is a prettier look.

$(document).ready({
   //say you have a div id=text with say 10 paragraphs... first hide them:
   $("#text p").hide();
 
   for(i=1;i<=$("#text p").length; i++){
      setTimeout("fadeUp($('#text p:nth-child("+i+")'))", 100*i);
   }
 
});
 
function fadeUp(e){
   //note that this function could perform whatever you want on element e
   $(e).fadeIn(2000);
}

@temp01
really neat huh?

Here is one that I've been using. It fades in items sequentially then after a brief pause slowly fades them out again.

		$(function(){
 
			var delay = 100;
			$("#menu div").each(function(){
				var fade = $(this);
				showItem(fade,delay);
				delay += 250;
			});
 
		});
 
		function showItem($o,n) { 
		  setTimeout(function() {
		     $o.fadeIn(1000);
		     setTimeout(function(){
			     $o.fadeOut(3000);    
		     }, 3000);
		  }, n); 
		}

This one comes from NetTuts (http://tinyurl.com/ycm4bap), slightly modified to use a named function instead of arguments.callee (depricated):

var elems = $('div.vehicle'), i = 0;
 
// If using jQuery 1.3 or lower, you need to do $(elems[i++] || []) to avoid an "undefined" error
(function fadePlz(){
  $(elems[i++]).fadeOut('slow', fadePlz);
})();

@temp01 Cool! Favorite script of the day

@temp01
Is this executable code? (A function in brackets, etc.?) I would love a short explanation how this works.

@carl
Yes, it's executable. The '(function foo(){ })(…)' is just a self-invoking function, see Decoding Self-Invoking Anonymous Functions.

I've created a simple plugin that can fade in elements sequentially.

http://www.thewebsqueeze.com/web-design-tutorials/sequential-fade-in-jquery-plug-in.html

While the code is not nearly as elegant as the ones listed here, the function call is nice, simple, readable, and chain-able.

An example function call with my plugin is:
$(elem).children().fadeInSequence();

great code! temp01!!
I have question though.. how to invoke the function again once it finished?
Thank you..!

hi temp01;

im new to this , is there a way to post a demo ? ( like displaying result from remote file )

tks
jeff

@j
http://jsfiddle.net/AEPEP/ check the console

I am using Temp01's method and was wondering how it would be possible to reverse the sequence to start from the last item or to even start from any item and fade in the remaining items.

Thanks

@temp01
Thanks for this awesome snippet, it works well and is helpful. I am having a hard time understanding how to run more than the fadeOut operation with this code, i would like to make a pulsing effect by fadein in then fading out for each item. Appreciate any response

@August
I figured it out lol…. heres an example for my situation in which i wanted a pulsing effect for each item in the selector at the end, hopefully it helps

(function hidenext(jq){
jq.eq(0).fadeOut(100, function(){
$(this).fadeIn(100, function() {

});
(jq=jq.slice(1)).length && hidenext(jq);
});
})($('.homeherowrap > div'))

I don't like jQuery, but for me

$("#vehicle1").fadeIn("slow", function(){
  $("#vehicle2").fadeIn("slow", function(){
    $("#vehicle3").fadeIn("slow", function(){
      $("#vehicle4").fadeIn("slow");
    });
  });
});

Is the easiest to read…