Mostrar elementos secuencialmente con Jquery

Desde el siguiente vídeo consejo, podremos aprender como hacer para mostrar los elementos de un listado que aparezcan secuencialmente mediante Jquery. Hay muchas formas de llevar a cabo esta tarea pero la que comenta el video tutorial es una de ellas y no esta del todo mal porque es bastante sencillo y no incluye mucho código. Se trata de una técnica para utilizar funciones recursivas.

(function() {
   // Inicialmente ocultamos todos los elementos del listado
   var lis = $('li').hide();

   // El desencadenante es en este caso un anchor, un enalce. Esto es muy generico pero se puede customizar, claro.
   $('a').click(function() {
      var i = 0;

      // Hacemos un FadeIn a cada elemento del listado cuando llega a los 200 ms, despues,
      // cuando ha terminado, recursivamente se llama a displayImages.
      // Cuando eq(i) hace referencia a un elemento que no existe,
      // jQuery devolverá un objeto vacio y no continuará haciendo fadeIn
      (function displayImages() {
         lis.eq(i++).fadeIn(200, displayImages);
      })();
   });
})();

Lo que hace este uso efectivo es el hecho de que, cuando lis.eq (i) se refiere a un elemento que no existe en el conjunto, se devuelve un objeto vacio jQuery. Cuando esto sucede, los métodos posteriores de la cadena (fadeIn) nunca será llamados.

Fuente: http://net.tutsplus.com/

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *