Fade In a List using Jquery
Subtleties are often the nicest part about new designs and user interface. and when used correctly can successfully ease the user into the page, giving it an organic feeling.
This effect (below) is a bit excessive at 400ms, but toning it down to something much faster would make it appear like its part of the page load.
When using the .each identifier in jquery you can actually specify an index, in this instance we’ll call it (i).
As we loop through each of the items matched by the “ul#thisisthelist li” selector, (i) increases. This means that since we are multiplying it by 400, that the delay before the fade in will be increased for each item.
CODE:
$("ul#thisisthelist li").each(function(i){
$(this).delay(i*400).fadeIn('slow');
});
