Exibindo elementos gradativamente com jQuery

Que tal carregar alguns elementos de sua página, um por um, gradativamente, com efeito fade e utilizando jQuery? Veja como é simples!

Primeiro, o HTML de exemplo

<ul id="lista">
<li>Lista 1</li>
 <li>Lista 2</li>
 <li>Lista 3</li>
</ul>

Agora, a função…
<script type=”text/javascript”>
 $.fn.fadeDelay = function(){
  var fade = 1000;
  var delay = 1000;
  var dlcur = 0;
  return this.each(function(){
   $(this).delay(dlcur).fadeIn(fade);
   dlcur += delay;
  });
};

/* Quando o documento estiver carregado… */

$(document).ready(function(){
 /* Primeiro, escondemos todos os elementos… */
 $('ul#lista li').hide();
 /* Agora, acionamos o script para carregar os elementos gradativamente */
 $('ul#lista li').fadeDelay();
});
</script>

 

E pronto!!!