Cascaded Fade Effect with jQuery.delay()

The example code: /static_media/jquery-cascade.html

To do the above, you use jQuery's delay() with a linearly increasing timeout, which, if you're using data from a loop, can be achieved by accessing an incremented value.

Below is a commented version of the code from the above demo:

function doCascade(delay){
	// Initiate an array
	var items = ["First", "Second", "Third", "Fourth", "Fifth"];
	// Loop through it with jQuery.each()
	$(items).each(function(i, text){
		// Create a new DIV.
		item = $('<div></div>');
		// Give it a class for styling
		$(item).addClass('item');
		// Add our text from the array.
		$(item).text(text);
		// Make it so it doesn't display
		// when it's added to the DOM.
		$(item).css({
			'display': 'none',
		})
		// Tell jQuery to delay the fadeIn by i * delay,
		// (no. times loop has iterated) * (delay in ms)
		$(item).delay(i * delay).fadeIn();
		// Finally, append it to a wrapper.
		// This is just an empty div, somewhere
		// to put the result.
		$('#cascade-wrap').append(item);
	});
}

// Call our function. Arguments:
// delay between each element
// fading in milliseconds.
doCascade(100);

You don't have to use fadeIn(), you could use this technique with jQuery's animate function. The example code: /static_media/jquery-cascade.html