Animaciones jQuery: un programa de 7 pasos

Una pizca de animación puede arreglar una interfaz aburrida. En este tutorial, aprenderá cómo hacerlo de la manera correcta con jQuery.

Una palabra del autor

Animación: un concepto que a menudo evoca reacciones divisivas de las personas. Algunos juran por su utilidad, mientras que otros se enfurecen por su uso excesivo. Sin embargo, las animaciones, cuando se usan correctamente, a menudo arreglan una interfaz de usuario y la hacen sentir mucho más ágil y limpia. En este tutorial, comenzaremos con un poco de conceptos básicos de jQuery, luego aprenderemos cómo crear nuestra primera animación, y luego construiremos el efecto y finalmente crearemos algo que será de uso real en el mundo real.

¿Interesado? ¡Comencemos de inmediato! Ten en cuenta que como esto está dirigido al principiante, podría insistir demasiado en algunas partes. Ten paciencia conmigo. En caso de que tengas curiosidad, consulta la primera parte de la demostración para ver el efecto simple que construiremos hoy.

Paso 1: conceptos básicos de jQuery

jQuery es una biblioteca de JavaScript que tiene la intención de facilitarte a ti, un desarrollador, la construcción de mejores sitios web interactivos, ricos en funciones e interfaces de usuario con la menor cantidad de líneas de código posible.

Una línea de código típica se ve así:

1

$(DOM Element).something();

Echemos un vistazo a cada parte:

• $ - Taquigrafía para el objeto jquery. Usa jquery en caso de que estés usando otro marco en la misma página, como en: jquery (elemento DOM).something();
• (Elemento DOM): el elemento con el que quieres hacer algo. Este es uno de los as de jQuery en el hoyo. Puedes usar selectores CSS para obtener un elemento. Aquí se puede utilizar cualquier declaración que funcione en un documento CSS. ID, clases, pseudo clases, cualquier cosa.
• something(): lo que deseas hacer al elemento obtenido. Esto puede ser desde ocultar un elemento hasta hacer una llamada AJAX a un controlador de eventos.

Aquí, vamos a seguir con la funcionalidad relacionada con la animación y los efectos.

Paso 2: Uso de los efectos horneados

jQuery proporciona una tonelada de métodos integrados que puede usar directamente. Estos incluyen métodos para mostrar / ocultar elementos con una serie de variaciones que incluyen deslizar el elemento y desvanecerlo hacia adentro y hacia afuera. También puedes usar varios métodos de alternar que alternan la visibilidad del elemento en cuestión.

Antes de echar un vistazo a cada uno de estos métodos, aquí está el formato general para llamar a cada método:

1

$("#element").effect([speed, callback]);

Siguiendo el paradigma general de jQuery, inicialmente apuntamos al elemento requerido usando selectores CSS. A continuación, solo llamamos a cualquiera de los métodos integrados.

Si bien, la mayoría de los métodos pueden llamarse sin pasar parámetros, a menudo querrás personalizar su funcionalidad. Cada método toma al menos los parámetros de velocidad y devolución de llamada.

velocidad denota la duración, en segundos, de la animación. Puedes pasar cadenas que incluyen lenta, normal o rápida o puedes ser más preciso y establecer el tiempo en milisegundos.

devolución de llamada es una función que se ejecuta una vez que se completan las animaciones. Puedes usarlo para hacer cualquier cosa, hacer una llamada AJAX silenciosamente en segundo plano, actualizar otra parte de la interfaz de usuario, etc. Tu imaginación es el limite.

Aquí hay una lista de las funciones incluidas con jQuery:

• show/hide: métodos para mostrar u ocultar un elemento. Toma velocidad y una devolución de llamada como parámetros.
• alternar - Método que manipula la visualización del elemento según el estado actual del elemento, es decir, si está oculto, se muestra y viceversa. Utiliza los métodos mostrar u ocultar.
• slideDown/slideUp: se explica por sí mismo. Varía la altura del elemento para crear una animación deslizante para revelar u ocultar un elemento.
• slideToggle: igual que el método de alternar, excepto que usa los métodos slideDown/slideUp para revelar u ocultar elementos.
• fadeIn/fadeOut - Varía la opacidad del elemento en cuestión para crear un efecto de desvanecimiento.
• fadeTo - Altera la opacidad del elemento para que coincida con el valor pasado. Obviamente, toma un parámetro de opacidad adicional donde 0 es completamente transparente y 1 es completamente opaco.

Como característica adicional, el método de alternar mencionado anteriormente tiene una implementación alternativa donde toma una expresión como parámetro para decidir si mostrar u ocultar un elemento.

Por ejemplo, si deseas alternar solo elementos de la lista que tienen una clase de efecto, tu código se vería así:

1

      $("li").toggle( $(this).hasClass("effect") );

En pocas palabras, las funciones de alternancia comprueban la expresión que se le pasa y, si es verdadera, se activa. De lo contrario, se deja solo. La expresión que hemos pasado aquí verifica si el elemento tiene una clase específica.

Paso 3: Crear una animación personalizada

A menudo, los métodos integrados no se ajustan exactamente a tus necesidades, en cuyo caso definitivamente querrías crear tus propios efectos personalizados. jQuery te permite hacer eso también. Muy fácilmente, en realidad.

Para crear un efecto de animación personalizado, utiliza el método animado. Deja que te enseñe.

1

$("#somelement").animate({property: value}, [speed, callback] );

El método animado es como cualquier otro método, ya que se invoca de la misma manera. Adquirimos un elemento y luego le pasamos algunos parámetros. Los parámetros es donde este método difiere de los efectos preconstruidos.

Los parámetros de velocidad y devolución de llamada cumplen la misma función que en los métodos anteriores. La propiedad del objeto que contiene varios pares clave / valor es lo que hace que este método sea único. Tu pasas cada propiedad que deseas animar junto con el valor final. Por ejemplo, supon que deseas animar un elemento al 90% de su ancho actual, tendrías que hacer algo como:

1

$("#somelement").animate({width: "90%"}, 350, function(){alert ("The animation has finished running.");});

El fragmento anterior animará el elemento al 90% de su ancho y luego alertará al usuario denotando que ha terminado.

Ten en cuenta que no estás limitado a las dimensiones. Puedes animar una amplia gama de propiedades que incluyen opacidad, márgenes, relleno, bordes, tamaños de fuente. El método también es bastante flexible cuando se trata de unidades. Píxeles, ems, porcentajes todo el trabajo. Entonces algo tan complicado como lo siguiente funcionará. Simplemente no se verá cohesivo.

1

$("#somelement").animate({

2

width: "90%"

3

fontSize: "14em",

4

height: "183px",

5

opacity: 0.8,

6

marginTop: "2cm",

7

marginLeft: "0.3in",

8

borderBottom: "30mm",

9

}, 350, function(){alert ("The animation has finished running.");});

Al definir una propiedad que consta de más de una palabra, crea una nota para definirla en el caso de camello. Esto está en contraste marcado con la sintaxis CSS habitual, así que haz una nota especial aquí. Es borderTop, no border-top.

Nota: jQuery solo permite animar propiedades que toman valores numéricos. Esto significa utilizar solo el núcleo, todas las propiedades relacionadas con el color están fuera. Sin embargo, no te preocupes. Con la ayuda de jQuery UI, animaremos los colores en poco tiempo.

Paso 4: Ajustando el efecto

Si observas el efecto simple en la demostración, es posible que hayas notado que está un poco roto. Al pasar el cursor por encima y fuera del elemento repetidamente, se genera una larga cola que, a su vez, hace que la animación se repita.

La forma más sencilla de evitar este problema es utilizar el método de detención inmediatamente antes de comenzar la animación. Esto borra efectivamente la cola y la animación puede continuar como de costumbre. Por ejemplo, este sería su código normal.

1

$("#someelement")

2

  .hover(function() {

3

    $(this).animate({ top: 20 }, 'fast');

4

  }, function() {

5

    $(this).animate({ top: 0 }, 'fast');

6

  });

Usando stop para evitar acumulaciones de animación, tu nuevo código se vería así:

1

$("#someelement")

2

  .hover(function() {

3

    $(this).stop().animate({ top: 20 }, 'fast');

4

  }, function() {

5

    $(this).stop().animate({ top: 0 }, 'fast');

6

  });

Bastante fácil, no? Pero este método tiene un pequeño problema. Las interacciones rápidas no conducirán a acumulaciones, sino a animaciones incompletas. Si deseas deshacerte por completo de este problema, deberás recurrir a un complemento como hoverFlow.

Paso 5: Agregar un poco más de realismo - flexibilizar

Si deseas agregar un poco más de realismo, necesitarías más control sobre la velocidad a la que progresa la animación. Aquí es donde entra en juego la flexibilización. La flexibilización controla esencialmente la aceleración y desaceleración de la animación con el tiempo.

El método de aceleración predeterminado es swing, que está integrado en jQuery. El complemento de flexibilización de Robert Penner te permite utilizar una serie de efectos de relajación. Consulta la sección de flexibilización en la demostración para ver cada efecto de flexibilización.

Solo hay una advertencia cuando se trata de usar un efecto de flexibilización personalizado: solo puedes usarlo con efectos de animación personalizados, es decir, con el método animado. Una vez que tengas incluido el complemento de flexibilización, utilizar un método de flexibilización personalizado es tan simple como pasarlo como un parámetro como este:

1

$("#somelement").animate({

2

width: "90%"

3

height: "183px",

4

}, 550, "easeInElastic");

Consulta la sección de flexibilización de la demostración para ver cada método en acción. Si bien algunos de los efectos de flexibilización pueden no ser adecuados para todas las situaciones, tus animaciones ciertamente se verán mucho más atractivas con el uso apropiado de ciertos métodos de relajación.

Paso 6: Pateando a un nivel superior - jQuery UI

La actualización a jQuery UI nos proporciona una serie de características muy necesarias. Tú, de hecho, no necesitas toda la biblioteca para hacer uso de las características adicionales. Solo necesitas el archivo de efectos principales para obtener la funcionalidad. No es el núcleo de la interfaz de usuario, solo el archivo de núcleo de efectos que pesa 10 kilobytes relativamente minúsculos.

Las características importantes que la biblioteca de efectos jQuery UI trae a la mesa son soporte para animar colores, suavizar y transiciones de clase.

Si recuerdas, mencioné anteriormente que con la biblioteca principal de jQuery, estás limitado a solo animar propiedades que toman números. Tú estás libre de esta limitación con jQ UI. Ahora puedes animar fácilmente el color de fondo de un elemento, su color de borde, etc. Además, en lugar de crear una función separada para estas características extendidas, esto simplemente extiende la función animada base. Esto significa que si tienes la biblioteca principal incluida en tu archivo, puedes usar el método animado normal para hacer todo el trabajo sucio por ti.

Por ejemplo, si deseas animar el color del borde de un elemento al pasar el mouse, tu código se vería así:

1

$(".block").hover(function() {

2

    $(this).animate({ borderColor: "black" }, 1000);

3

},function() {

4

    $(this).animate({ borderColor: "red" }, 500);

5

});

Las transiciones de clase son responsables de animar entre clases. Con la biblioteca base, si eliminas y luego agregas una clase que cambió la apariencia de un elemento, sucedería instantáneamente. Cuando tienes la biblioteca de IU a bordo, tienes la opción de pasar parámetros adicionales para controlar la velocidad de la animación, el método de relajación y una devolución de llamada. Al igual que con la característica anterior, esta funcionalidad se basa en la API jQuery existente que facilita el proceso de transición.

La característica final que jQuery trae a la mesa son las ecuaciones de aceleración integradas. Anteriormente tenías que usar un complemento adicional para encargarse de esto, pero ahora viene incluido, por lo que no necesitas preocuparte más.

Paso 7: Construyendo nuestro primer efecto de mundo real

Todos los ejemplos anteriores estaban destinados a ser solo demostraciones de la funcionalidad en cuestión. ¿No sería bueno construir algo de uso real? Eso es exactamente lo que vamos a hacer hoy. En realidad, no es algo radicalmente nuevo o innovador, pero esta demostración te permitirá utilizar lo que hemos aprendido hoy en un escenario del mundo real.

Imagínate esto: deseas mostrar una imagen y cuando un usuario pasa el mouse sobre ella, muestra 2 secciones dentro de la imagen. Uno muestra un encabezado y el otro muestra una pequeña descripción de la imagen. Estoy seguro de que encontrarás literalmente un billón de complementos que hacen lo mismo, pero hoy vamos a construirlo desde cero. Te prometo que no es tan difícil como parece. De hecho, en realidad es bastante fácil y se puede construir muy rápidamente. Empecemos.

El HTML

Primero, necesitamos una base sólida de marcado para construir.

1

<!DOCTYPE html>

2

<html lang="en-GB">

3

<head>

4

<title>Beginning Animations with jQuery - by Siddharth for NetTuts</title>

5

<link type="text/css" href="css/style.css" rel="stylesheet" />

6

<script type="text/javascript" src="js/jquery.js"></script>

7

<script type="text/javascript" src="js/jqueryui.js"></script>

8

<script type="text/javascript" src="js/mojo.js"></script>

9

</head>

10

<body>

11

12

<div id="container">

13

14

<h1>Beginning Animations with jQuery</h1>

15

<div>by Siddharth for the lovely folks at Net Tuts</div>

16

<p>A simple real world usage of the animation effects followed by demos for the article's text demonstrating a fix for animation build up and the different easing methods available.</p> 

17

18

<div class="bblock">

19

<h2>A Simple Real World Effect</h2>

20

<p>When the method is changed, it goes to zero height using the standard jQuery easing and then expands using the specified easing method.</p>

21

22

<div class="item">

23

<div class="title">ThemeForest</div>

24

<img src="images/tf.jpg" alt="Image" />

25

<div class="desc">The only place you need for site templates and themes </div>

26

</div>

27

28

<div class="item last">

29

<div class="title">CodeCanyon</div>

30

<img src="images/cc.jpg" alt="Image" />

31

<div class="desc">The premier destination for scripts and code snippets</div>

32

</div>

33

34

</div>

35

36

<!-- Rest of the code for the demo -->

37

</div>

38

</body>

39

</html>

Para este efecto, primero tendremos que decidir una estructura para cada elemento. Cada elemento está envuelto por un div con una clase de elemento. Dentro del div hay 3 elementos: la imagen misma y 2 elementos div que contienen el título y la descripción.

Las otras partes son bastante mundanas y se explican por sí mismas. Comenzamos incluyendo la biblioteca jQuery, la biblioteca jQuery UI y nuestro archivo que contiene nuestro código JS personalizado. Ten en cuenta que solo necesitaba la parte central de efectos de jQuery UI, así que solo descargué eso. Si deseas incorporar más efectos, necesitarás una compilación personalizada. Puedes descargar una compilación personalizada aquí.

Así es como se ve nuestra página con esta fase completa.

El CSS

1

.item {

2

	position: relative;

3

	margin: 20px 60px 40px 0;

4

	overflow: hidden;

5

}

6

7

.item .title, .item .desc {

8

	background: #000;

9

	color: #fff;

10

	position: absolute;

11

	display: block;

12

	width: 638px;

13

	opacity: 0.4; 

14

}

15

16

.item .title {

17

	top: 0;

18

	font-size: 16px;

19

	padding: 12px 10px 25px 0;

20

	text-align: right;

21

}

22

23

.item .desc {

24

	bottom: 0;

25

	font-size: 12px;

26

	padding: 5px 0 15px 10px;

27

}

Algunas cosas que debes tomar nota aquí. Cada elemento del elemento tiene su propiedad de posición establecida en relativa para que los elementos dentro de ella puedan posicionarse fácilmente. Además, su propiedad de desbordamiento está configurada como oculta para que podamos ocultar el título y la descripción afuera cuando no son necesarios.

El título y la descripción tienen su propiedad de posición establecida en absoluta para que puedan posicionarse con precisión dentro del elemento del elemento. El título tiene un valor superior de 0, por lo que está en la parte superior y la descripción tiene su valor inferior establecido en 0, por lo que está justo en la parte inferior.

Aparte de eso, el CSS es bastante repetitivo y se ocupa principalmente de la tipografía, un poco de posicionamiento y estilo. Nada muy radical.

Así es como se ve nuestra página con esta fase completa.

La magia JavaScript habilitada para jQuery

1

$(document).ready(function() 

2

{

3

	// Code for other parts of the demo

4

5

	$(".item").children("div.title").animate({top: -60}, 300);

6

	$(".item").children("div.desc").animate({bottom: -40}, 300);

7

8

$(".item").hover(

9

		function()

10

		{

11

			$(this).children("div.title").stop().animate({top: 0}, 700, "easeOutBounce");

12

			$(this).children("div.desc").stop().animate({bottom: 0}, 700, "easeOutBounce");

13

		},

14

		function(){

15

			$(this).children("div.title").stop().animate({top: -60}, 500);

16

			$(this).children("div.desc").stop().animate({bottom: -40}, 400);

17

		}

18

		);

19

20

$(".title, .desc").hover(

21

		function()

22

		{

23

			$(this).stop().animate({backgroundColor: "#444"}, 700, "easeOutSine");

24

		},

25

		function(){

26

			$(this).stop().animate({backgroundColor: "#000"}, 700);

27

		}

28

		);

29

});

Puede parecer un poco imponente pero no lo es. Déjame explicarte cada parte.

La lógica de este efecto es bastante simple. Como los elementos se colocan absolutamente, inicialmente colocamos los elementos fuera de la ventana gráfica. Cuando la imagen está suspendida, solo necesitamos moverla nuevamente a su posición original, es decir, en la parte superior e inferior de la imagen.

Primero, quitamos el título y la descripción de la vista. Hacemos esto con JavaScript en lugar de CSS por una razón muy específica. Incluso si JS está desactivado, se degrada con bastante gracia. El título y la descripción todavía se superponen sobre la imagen y se parece al estado de desplazamiento. Si tuviéramos que usar CSS para ocultar el título y la descripción y si JS está desactivado, quedarían completamente ocultos y, por lo tanto, inútiles. Elegí usar JS para el trabajo sucio en aras de la mejora progresiva.

Inicialmente vinculamos nuestro código personalizado a la función de desplazamiento de cada elemento del elemento. Esto permite que este controlador sea bastante genérico y reutilizable. Agregar esta funcionalidad a otros es tan simple como darle una clase de elemento. La primera función es para el evento de desplazamiento y la segunda es para el evento de desbloqueo.

Dentro del alcance de la función, esto se refiere al elemento que activó el evento. Usamos el método animado para modificar los valores apropiados. También usamos un poco de relajación para hacerlo un poco más pegadizo. En mouseout o unhover, simplemente cambiamos los valores a sus valores predeterminados.

Como un pequeño extra, cuando los contenedores para el título y la descripción se ciernen, se transforman lentamente los colores, gracias a jQuery UI.

Y en realidad hemos terminado. No tomó tanto tiempo, ¿verdad? No está mal para un script pequeño que es aún más pequeño considerando cuántas líneas se asignaron únicamente para las llaves.

Conclusión

Y ahí lo tienes. Cómo crear animaciones con jQuery junto con un ejemplo del mundo real de dar un buen uso a lo que has aprendido. Con suerte, este tutorial te ha parecido interesante y útil. Siéntete libre de reutilizar este código en otros lugares de tus proyectos y repica aquí si tienes dificultades.

Preguntas? ¿Cosas bonitas que decir? ¿Críticas? Haz clic en la sección de comentarios y déjame un comentario. ¡Feliz codificación!

• Síguenos en Twitter o suscríbete a Nettuts + RSS Feed para obtener los mejores tutoriales de desarrollo web en la web. Listo

Escribe un Tutorial PLUS

¿Sabías que puede ganar hasta $ 600 por escribir un tutorial PLUS y / o screencast para nosotros? Estamos buscando tutoriales detallados y bien escritos sobre HTML, CSS, PHP y JavaScript. Si eres capaz, comunícate con Jeffrey en nettuts@tutsplus.com.

Ten en cuenta que la compensación real dependerá de la calidad del tutorial final y del screencast.