jQuery / Revisitando animaciones

Bienvenidos sean a este post, hoy repasaremos un tema que ya vimos.

Hoy comenzaremos una serie de posts donde repasaremos las animaciones y en los proximos posts veremos algunos temas avanzados sobre estas, pero para ello iremos directamente a un ejemplo, para ello les dejo un link donde descargarlo:

Simplemente extraigan los archivos en un directorio, este ejemplo sera una pagina donde tendremos cuatro libros de H.P. Lovecraft, en el codigo pueden ver que tendran la foto, y algunos datos asi como la sinopsis de cada uno de ellos, pero si lo abren en este momento se vera de la siguiente forma:

Por el momento solo veremos las potadas de cada libro, pero no nos apuremos vamos a ver el primer tema como es crear una simple animacion para cuando el mouse esta sobre la imagen o deja a esta, para ello crearemos un nuevo archivo con el nombre de codigo.js y le agregaremos el siguiente codigo:

codigo.js

$(document).ready(function() {
	$('div.libro').on('mouseenter mouseleave', function(ev) {
		var tam = ev.type == 'mouseenter' ? 160 : 150;
		var pad = ev.type == 'mouseenter' ? 0 : 5;
		$(this).find('img').animate({
			width: tam,
			height: tam,
			paddingTop: pad,
			paddingLeft: pad
		});
	});
});

En este caso vamos a primero seleccionar el div identificado como libro y a este le aplicaremos los eventos para cuando el cursor entra y sale de este, lo primero que haremos es definir dos variables, la primera sera para el tamaño de la imagen y el otro para la separacion, en ambos casos usamos un operador condicional donde verificaremos si el evento es de tipo mouseenter en caso de ser verdadero estableceremos un valor de lo contrario estableceremos otro, el primer valor sera para modificar el actual y el otro para volverlo a la normalidad, despues en el div selecccionado buscaremos al tag img y a este le aplicaremos el metodo animate donde modificaremos el ancho (width)) y el alto (height) con el valor de la primer variable y despues la separacion de arriba (paddingTop) y de la izquierda (paddingLeft) con la otra variable, si lo probamos trabajara de la siguiente forma

En el video pueden ver como cada imagen se agranda levemente cada vez que pasamos sobre esta y vuelve al tamaño original una vez que salimos pero un problema que no vemos en el video es cuando pasamos el cursor sobre las imagenes rapidamente y varias veces las imagenes se quedaran continuamente en movimiento hasta que termine de proccesar las pasadas, para ello debemos determinar cuando interrumpir la animacion cuando suceda lo antes comentado, si bien sobre el metodo animate hablamos en este post y en este otro post hablamos sobre las animaciones simultanes versus las encoladas por lo general cuando aplicamos una animacion en un elemento estas son agregadas a la cola y llamadas en orden, por esta razon al agregar una nueva animacion antes de que finalice la anterior ahora que se encolen y esto no terminara hasta que quede vacia, para evitar esto tenemos dos opciones.

Vamos a probar la primera y para ello tomaremos el codigo anterior y lo modificaremos de la siguiente manera:

$(document).ready(function() {
	$('div.libro').on('mouseenter mouseleave', function(ev) {
		var $img = $(this).find('img');
		if (!$img.is(':animated') || ev.type == 'mouseleave') {
			var tam = ev.type == 'mouseenter' ? 160 : 150;
			var pad = ev.type == 'mouseenter' ? 0 : 5;
			$img.animate({
				width: tam,
				height: tam,
				paddingTop: pad,
				paddingLeft: pad
			});
		}
	});
});

Primero definimos un nuevo objeto img donde esta el elemento img donde estemos, despues por medio de un condicional le diremos que actue siempre y cuando el estado no sea animado, esto mediante el selector personalizado de jQuery, o el tipo de evento sea mouseleave, si se cumple algunas de las condiciones haremos lo mismo que antes, cambiar el valor de las variables y despues con animate alterarlos los valores de las propiedades, si lo verificamos funcionara de la siguiente manera

En el video podemos ver que sigue funcionando y no tenemos el inconveniente de la repeticion perooooo tenemos otro, ahora si pasamos muy rapido algunas pasadas no toman el evento y por ende no lo animan, asi que esta solucionado a medias pero pasemos a la otra opcion y para ello modificaremos el codigo de la siguiente manera:

$(document).ready(function() {
	$('div.libro').on('mouseenter mouseleave', function(ev) {
		var tam = ev.type == 'mouseenter' ? 160 : 150;
		var pad = ev.type == 'mouseenter' ? 0 : 5;
		$(this).find('img').stop().animate({
			width: tam,
			height: tam,
			paddingTop: pad,
			paddingLeft: pad
		});
	});
});

En este caso es muy similar al codigo que teniamos originalmente pero antes de ejecutar el metodo animate usamos a stop para detener cualquier animacion o mejor dicho que vaya al final de la cola, y ahi agregue la nueva animacion, esto evitara cualquiera de los inconvenientes antes mencionados, veamos como trabaja ahora

Aca podemos ver como funciona mas decentemente con respecto a los codigos anteriores, con esto establecimos la base de nuestro proyecto base y en los proximos posts iremos agregando mas modificaciones, antes de finalizar les dejo un link con todo los archivos trabajado en este post:

En resumen, hoy hemos repasado un poco las animaciones que hemos tratado en posts anteriores, hemos establecido el ejemplo base que usaremos en los proximos posts y hemos visto un pequeño inconveniente con el encolamiento de animacion y como solucionarlo, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.