Emulando la construcción del DOM con jQuery

Recientemente Bel Alman (aka Cowboy) ha escrito un pequeño snippet que muestra (o emula) la construcción de la estructura HTML de aquella página en la que lo carguemos.

Únicamente requiere de jQuery, por lo que podemos copiarlo y pegarlo en la consola de Firebug de cualquier página que utilice este popular librería, como por ejemplo, esta misma: inmediatamente veremos cómo el navegador va renderizando cada uno de los elemento con un efecto ‘fade’.

El código es el siguiente:

( function n( e ){
  e.eq( 0 ).fadeIn( 99, function() {
    n( e.slice( 1 ) );
  } );
})( jQuery( ":visible" ).hide() );

Si lo revisamos, vemos que lo primero que hace es ocultar todos los elementos visibles de la página a la vez que los pasa como argumento a la función autoejecutable. Después recorre de nuevo cada uno de los elementos para aplicarles un efecto fadeIn en cascada.

Un código elegante por su sencillez que consigue un efecto interesante.

Acerca de Carlos Benítez

Programador Web y arquitecto Javascript. Fundador de www.etnassoft.com y OpenLibra, la Biblioteca Libre Online
Esta entrada fue publicada en Javascript, jQuery y etiquetada , , , , . Guarda el enlace permanente. Sígueme en Twitter

Últimos libros gratuitos añadidos a OpenLibra

Aún no tenemos debug!
Ningún marciano se ha comunicado.

Deja un comentario

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

Licencia Creative Commons 3.0

®Copyright 2016. Cotenido web bajo licencia Creative Commons 3.0

Códigos bajo licencias MIT y GPL. Ver página de licencias para más información