Cómo animar la carga de contenido en un layout con jQuery

Hacemos uso del método load de jQuery para cargar datos mediante llamadas AJAX, al mismo tiempo que utilizamos animaciones para lograr efectos en la transición.

La animación constituye una parte fundamental de jQuery, es considerada uno de sus principales atractivos y gracias a ella en sus inicios pudo atraer a varios usuarios que se convirtieron con el tiempo en fieles seguidores del framework. La manera flexible y sencilla en que jQuery nos permite anidar animaciones y al mismo tiempo manejar data, hace que el diseñador no tenga que reinventar la rueda cada vez que necesite realizar una transición animada, además de que evita realizar el doble de trabajo.

Con este tutorial trataremos de demostrar la capacidad de carga y animación de jQuery, tomando un layout sencillo y agregándole las mejoras ofrecidas por el framework. Haremos uso de la funcionalidad AJAX para lograr la carga datos en el contenedor del layout, de esa manera el usuario no necesitará dejar la página para poder ver más información, al mismo tiempo integraremos algunos efectos de animación de fácil codificación pero de resultados significantes.

Layout de la página

El primer paso es crear un layout sencillo que sirva para ejemplificar la carga de contenido, para ello simplemente utilizaremos un menú y un contenedor, de esa manera al dar clic en alguna de las opciones del menú, la información del contenedor cambiará sin necesidad de tener que cargar la página por separado. Nuestro código HTML lucirá de la siguiente manera:

    <div id="wrapper">  
    <h1>La Webera</h1>  
    <ul id="menu">  
        <li><a href="1.html">Sección 1</a></li>  
        <li><a href="2.html">Sección 2</a></li>  
        <li><a href="3.html">Sección 3</a></li>  
    </ul>  
    <div id="contenedor">  
        <h2>jQuery</h2>  
        <p>Carga y animación de contenido</p>  
    </div>  

Una vez realizada la estructura, tenemos que asegurarnos de cargar la versión más reciente de jQuery, para ello puedes bajar el código directamente de su sitio, o simplemente hacer referencia al repositorio de Google donde se encuentra. Esto depende de la manera en que queremos trabajar, al cargar el código de jQuery desde Google es muy probable que el usuario ya lo tengo cargado en su máquina por lo que no será necesario una petición extra a tu servidor, pero tiene la desventaja de depender de alguien externo.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Manejo de métodos y eventos con jQuery

Una vez definida la estructura HTML tenemos que empezar a pensar en lo que queremos cambiar dinámicamente, para ello haremos uso de la librería jQuery, previamente cargada. Cuando se utiliza jQuery tenemos que pensar en eventos, un evento es una acción que realiza el usuario, como un clic, una tecla aplastada o pasar el ratón sobre un elemento, dichos eventos pueden ser utilizados para identificar cuando llevar a cabo ciertas acciones.

En este caso habíamos planeado cargar el nuevo contenido cada vez que el usuario diera clic en el menú, entonces ese clic se convertirá en el evento que queremos manejar. Para realizar esto, jQuery nos ofrece una estructura bastante fácil y sencilla, basta con escoger el elemento que recibe la acción mediante un selector, el cual puede ser su ID, una de sus clases, su tipo o alguna expresión que indique uno de sus atributos.

En nuestra estructura todos los links del menú son parte de una lista desordenada que tiene un ID que la identifica, en base a esto podemos elaborar nuestro selector. Después de englobar todos los elementos que recibirán la acción, tenemos que indicar el evento, en este caso es un clic y para ello jQuery utiliza un método que sencillamente lleva el nombre “click”, el cual se anida al selector y posteriormente se indica la acción a realizar.

jQuery('#menu li a').click(function(){  
    // Aqui irá la acción de carga de contenido 
});

Cargar el contenido

La acción de carga de contenido estará dividida en dos partes, primero tenemos que remover lo que ya existía en el contenedor y después cargar el nuevo contenido. Para lograr definir la página que contiene los datos que queremos mostrar, lo primero que tenemos que hacer es obtener el atributo “href” del link que fue seleccionado en el menú, para ello pondremos la siguiente línea dentro del evento que definimos con jQuery:

var pagina_a_cargar = jQuery(this).attr('href')+' #contenedor';

Con esta sentencia, al momento de dar clic sobre una opción del menú asignaremos a la variable un valor con la página de destino y el id del contenedor donde queremos cargarlo, esto será enviado con la llamada AJAX en el método “load” de jQuery para que reemplace el contenido.

Para lograr una transición animada podemos recurrir a un efecto sencillo, en vez de hacer que el contenido simplemente desaparezca en un instante, haremos uso de la función “hide” de jQuery para que se oculte a cierta velocidad y mande llamar a otra función que declararemos más adelante, la cual se encargará de cargar el contenido:

jQuery('#contenedor').hide('fast', cargarContenido); 

Esto hará lo necesario para ocultar el viejo contenido, ahora necesitamos mostrar el nuevo y para ello elaboraremos una serie de funciones que se encargarán de llevar acabo el proceso y animarlo. La primera función a definir es “cargarContenido” la cual es llamada al aplicar el efecto hide al contenedor.

function cargarContenido() {  
    jQuery('#contenedor').load(pagina_a_cargar,'',mostrarNuevoContenido)  
} 

Dentro de esta función hacemos uso del método “load”, el cual se encargará de obtener el contenido de la página que especificamos en el enlace sobre el cual dimos clic. Después de cargarlo hace llamada a una nueva función que lleva por nombre “mostrarNuevoContenido”, y esto lo hacemos para aplicar un nuevo efecto con la función “show” de jQuery.

function mostrarNuevoContenido() {  
    jQuery('#contenedor').show('normal');  
} 

Finalmente tenemos que agregar un “return false” al final de nuestro evento de clic para que al momento de seleccionar un enlace el navegador no trate de abrirlo en una nueva ventana. De esta manera lucirá nuestro código final:

jQuery().ready(function() {     
    jQuery('#menu li a').click(function(){  
        var pagina_a_cargar = jQuery(this).attr('href')+' #contenedor'; 
        jQuery('#contenedor').hide('fast', cargarContenido);   

        /* Funciones */
        function cargarContenido() {  
            jQuery('#contenedor').load(pagina_a_cargar,'',mostrarNuevoContenido)  
        }

        function mostrarNuevoContenido() {  
            jQuery('#contenedor').show('normal');  
        } 

        return false;
    });    
});