JQuery, parte 9: Animaciones

Uno de los fuertes de Jquery y que han convencido a más de un desarrollador a usarlo son las animaciones.

Un poco de historia

Cuando se habla de animaciones en la web lo primero que piensa la gente es Flash, y con justa razón, ya que éste durante muchos años fue quien le dio a las sitios de internet un aspecto muy dinámico en sus diseños, cuando estos eran prácticamente estáticos.

Sin embargo con el paso del tiempo Flash trajo algunas complicaciones, mucho se engolosinaron con esta aplicación y empezaron a desarrollar sitios prácticamente con un interfaz 100 por ciento Flash. El problema de Flash es que al ser un archivo embebido en un código html todo lo que se encuentra dentro del mismo es caja negra para Google y sus buscadores.

Existen desarrolladores que odian Flash y piensan que la solución es que desaparezca por completo de la web, mientras que hay otros (por lo general con más tendencia al diseño que a la programación) que lo aman y defienden a muerte. Yo sin embargo creo estar en una tercera categoría, yo pienso que los sitios web deben armarse en una base xhtml y que no está mal usar Flash, mas no abusar del mismo. Por ejemplo un banner publicitario puede hacerse con Flash, pero no un simple botoncito que cambia de color cuando le pasan el mouse arriba, eso debería hacerse con Css o si es algo más complejo con Javascript.

Animaciones en Jquery:

A continuación mostraré algunas de las formas que tiene jquery de crear animaciones, estas son muy simples y fáciles de usar.

.fadeIn()

El método .fadeIn() permite visualizar un elemento que está oculto, pero de tal forma en que el elemento se irá visualizando de a poco hasta quedar visible:

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
          $("#ver").click(function(){
             $("#caja").fadeIn(500);
          });
       });
    </script>
 </head>
 <body>
    <a id="ver" href="javascript:void(0);"> Ver texto </a>
    <div id="caja" style="display: none;">
       <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
       <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
       <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
       <p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    </div>
 </body>
</html>

Como vemos el método .fadeIn() recibe un parámetro que es un número, éste indicará la cantidad de milisegundos que tardará la animación. Este método también puede recibir un segundo parámetro con una función que se disparará una vez completada la animación:

$("#caja").fadeIn(500, function(){
   alert('Animacion completa.');
});

.fadeOut()

Cumple la misma función que fadeIn() pero a la inversa, osea que en lugar de mostrar el elemento lo oculta. Los parámetros son los mismos, el primero es la cantidad de milisegundos que demora la animación y el segundo es una función que se dispara al finalizar la misma, también opcional.

Continuaremos con el ejemplo anterior, pero esta vez el link que se presiona mostrará la caja con el texto si está está oculto y lo ocultará si está visible:

Ver ejemplo

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
          $("#ver_ocultar").click(function(){
             if($(this).hasClass('visualizar')){
                $(this).removeClass('visualizar');
                $(this).html('Ocultar texto');
                $("#caja").fadeIn(500);
             }else{
                $(this).addClass('visualizar');
                $(this).html('Ver texto');
                $("#caja").fadeOut(500);
             }
          });
       });
    </script>
 </head>
 <body>
    <a id="ver_ocultar" class="visualizar" href="javascript:void(0);"> Ver texto </a>
    <div id="caja" style="display: none;">
       <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
       <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
       <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
       <p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    </div>
 </body>
</html>

Antes que nada explicaré algo que no había explicado en los anteriores posteos. El método .hasClass() nos devolverá true si el elemento al que se lo estamos aplicando tiene esa clase que recibe como parámetro y false si no es así. .addClass() agregará el valor de clase que recibe como parámetro y .removeClass() la quitará.

Volviendo al ejemplo, al hacerse click() en el link habrá un if que preguntará si éste tiene la clase que le indicará que debe visualizar, de ser así quitará la clase, cambiará su contenido con el texto ‘Ocultar texto’ y le aplicará fadeIn() a la caja con el texto, sino hará todo lo contrario, agregará la clase cambiará el contenido con el texto ‘Ver texto’ y le aplicará .fadeOut()

.slideToggle() 

Dos métodos que tienen cierta similitud con .fadeIn() y .fadeOut() son .slideDown() y .slideUp() pero con un efecto diferente. En el caso de .slideDown() agrandará el elemento hacia abajo haciéndolo visible mientras que .slideUp() provocará el efecto inverso. O bien utilizar el método .slideToggle()  que llamará a estos dos métodos. Si el elemento es invisible lo visualizará con .slideDown() y si está visible lo ocultará con .slideUp()

Ver ejemplo

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
          $("#ver_ocultar").click(function(){
             $("#caja").slideToggle();
          });
       });
 </script>
</head>
<body>
    <a id="ver_ocultar" class="visualizar" href="javascript:void(0);"> Ver texto </a>
    <div id="caja" style="display: none;">
       <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
       <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
       <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
       <p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    </div>
</body>
</html>

.animate()

Sin dudas el método .animate() es el más completo de Jquery para realizar animaciones. Este método recibirá tres parámetros. Al primero deberemos indicarle cuáles serán las propiedades que deberá animar, el segundo son los milisegundos que demorará y el tercero la función que deberá disparar al concluir la animación (este último es opcional)

Ver ejemplo

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
          $("#animar").click(function(){
             $("#caja").animate({
                'top': '200px',
                'left': '300px',
                'width': '0px',
                'height': '0px',
                'opacity': 0.1
             }, 1000, function(){
                $("#caja").css('display', 'none');
                alert('La animacion ha concluido');
             });
          });
       });
 </script>
</head>
<body>
    <a href="javascript:void(0);" id="animar" href="javascript"> Animar </a>
    <div id="caja" style="position: absolute; background-color: violet">
       <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
       <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
       <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
 <p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
 </div>
</body>
</html>

Descargar ejemplos

Anterior: JQuery, parte 8: Relaciones entre elementos. Métodos: .parents() y .find()

Siguiente: JQuery, parte 10: UI

 

Redes sociables

    Deja un comentario

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

    *