jQuery / .animate()

Bienvenidos sean a este post, hoy veremos un nuevo metodo para crear otros efectos.

Este metodo nos permite crear efectos personalizables, a diferencia de lo visto en posts anteriores, para trabajar con el disponemos de dos tipos de sintaxis, veamos como es la primera:

animate(propiedades[, duracion, aceleracion, funcion])

Siendo el primer argumento obligatorio y el resto son opcionales, veamos que es cada uno de ellos:

• propiedades, es un objeto con las propiedades y valores que pasaremos a la funcion
• duracion, es para indicarle cuanto durara tanto con las palabras claves vistos anteriormente como un valor numerico
• aceleracion, este es para indicar el tipo de aceleracion pero por el momento no lo usaremos
• funcion, aqui podemos pasar una funcion para que la funcion la ejecute

El siguiente es un ejemplo de como aplicar esta sintaxis:

objeto.animate(
		{ propiedad1: 'valor', propiedad2: 'valor' },
		duracion, 
		aceleracion, 
		function() {
			alert('animacion finalizada');
			}
		);

En el primer campo pasamos las propiedades con los valores correspondientes, observen como lo informamos, despues le asignaremos una variable para la duracion, la aceleracion y por ultimo una funcion que usaremos para informar que se termino la animacion, con esto comentado veamos como es la otra sintaxis:

animate({propiedades},{opcciones});

En este caso pasamos dos objetos donde en uno tendremos todas las propiedades como la sintaxis anterior pero en este caso las opciones tambien podemos pasarlas como un objeto, veamos un ejemplo:

objeto.animate(
	{ propiedad1: 'valor',
	  propiedad2: 'valor' 
	}, {
	  duration: 'valor',
	  easing: 'valor',
	  complete: function() {
			alert('animacion finalizada');
	},
	  queue: true,
	  step: callback
});

Aqui podemos ver como pasamos dos objetos entre las llaves, en el primer caso tendremos todas las propiedades y valores que afectaremos, en el segundo caso pasamos las opciones y pasaremos cada uno de las opciones que tocaremos con sus respectivos valores y la funcion la pasamos para cuando se complete la animacion, para entenderlo mejor vamos a poner en practica esto que hablamos, y para ello vamos a necesitar el codigo del post anterior, en caso de no tenerlo les dejo a continuacion un link para descargarlo:

Simplemente extraigan los archivos del mismo en un directorio, una vez realizado pasaremos a trabajar con el archivo codigo.js, para ello vamos a cambiar la siguiente linea:

$capa.slideToggle('slow');

De la siguiente manera:

$capa.animate({height: 'toggle'}, 'slow');

Hace exactamente lo mismo que la linea anterior pero en lugar de usar la funcion directamente lo hacemos a traves del metodo animate, le decimos que use a toggle para la propiedad height (altura), y le especificamos que la duracion sea de forma lenta, si prueban la pagina deberia trabajar de la siguiente manera

Esto fue solo un precalentamiento porque ahora vamos a trabajar con una serie de modificaciones, para ello tomaremos la linea anterior:

$capa.animate({height: 'toggle'}, 'slow');

Ahora la modificaremos de la siguiente manera:

$capa.animate({ 
	height: 'toggle',
	opacity: 'toggle'
}, 'slow');

En este caso es muy similar a lo que vimos anteriormente pero ahora tiene adicionado el tema de la opacidad, por lo tanto no solamente lo «enrolla» sino tambien lo ira desvaneciendo al mismo tiempo, y lo opuesto cuando lo «desenrolle», ahora nuestro siguiente cambio sera en el otro segmento de codigo, buscaremos la siguiente linea:

$cap1.css('fontSize', num + 'px');

Y la modificaremos de la siguiente manera:

$cap1.animate({fontSize: num + 'px'}, 'slow');

Este en lugar de solo cambiar el tamaño de la fuente tambien animara ese cambio dando un aspecto mas «monono», veamos como trabaja hasta ahora mediante el siguiente video

Como pueden ver ahora tenemos dos efectos nuevos sobre nuestra pagina, dando un mejor aspecto a la transicion entre los distintas variaciones que podemos aplicar a la pagina, antes de finalizar les dejo los archivos con todas las modificaciones realizadas:

En resumen, hoy hemos visto al metodo animate, que es, como se utiliza, las dos sintaxis disponibles, despues hicimos unas modificaciones para mejorar los cambios en la pagina que vinimos trabajando, 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.