jQuery / objeto $.fx

Bienvenidos sean a este post, hoy hablaremos sobre el objeto encagado de manejar los efectos.

Este nos sirve principalmente para cuando necesitamos cambiar las caracteristicas de una animacion pero no solamente es para eso ya que el objeto posee algunas propiedades que no estan documentadas y son para uso interno de la libreria y otras que son herramientas que alteran globalmente las animaciones, para entender el concepto vamos a tomar el codigo del post anterior y en caso de no tenerlo les dejo un link para descargarlo:

Extraigan todo en un directorio, con esto realizado debemos ir al archivo codigo.js y agregaremos el siguiente bloque de codigo:

$(document).ready(function() {
	$('#fx-alternar').show().on('click', function() {
		$.fx.off = !$.fx.off;
	});
});

Este no es muy complicado primero tomaremos el boton que no se ve en la pagina, porque en el archivo .css tiene un display none, y por medio de show primero lo hacemos aparecer, despues le asignamos el evento click y en este tomaremos el objeto y el asignaremos el valor inverso al que tenga actualmente, por lo tanto cada vez que lo presionemos alternara entre activar y desactivar los efectos, veamos como funciona mediante el siguiente video

En el video podemos ver como se desactivan y activan las animaciones en la pagina con solo apretar el boton, esto es asi porque la propiedad off maneja valores booleanos, es decir que si es true desactivara las animaciones y si es false las activara, pero esto no termina aca sigamos con el siguiente tema.

Un tema que hemos visto muy superficialmente son la duuracion de los efectos y en este caso este es afectado por la propiedad speeds del objeto, en realidad es un objeto en si y si lo miramos dentro del nucleo de jQuery esta definido de la siguiente forma:

jQuery.fx.speeds = {
	slow: 600,
	fast: 200,

	// Default speed
	_default: 400
};

Observen como tenemos dos propiedades que nos son muy conocidas y la privada que usaremos cuando no pasemos alguna velocidad, sobre esto hablamos en este post, como la mayoria de los metodos de animacion siempre tienen una opcion de velocidad o duracion, al momento de aplicar estas palabras claves o no informar alguna siempre usara esta propiedad del objeto, salvo cuando pasemos valores independientes, y para determinar esta duracion jQuery lo hace a traves de los siguientes pasos:

• Si $.fx.off tiene valor true la duracion se establece como 0
• Chequea si el valor es numerico, en caso de ser verdadero lo pasa como milisegundos
• Chequea si el valor coincide con la propiedad de $.fx.speeds, en caso de ser verdadero pasa el valor de la propiedad
• Si no pasamos algun valor se establece el valor de $.fx._default

Pero no nos limitamos solamente a esto porque si bien ya disponemos de dos palabras claves para usar valores o el valor predeterminado sino que podemos personalizar los nuestros, por ejemplo:

$.fx.speeds.lento = 1200;

En este caso establecemos este valor de velocidad asociado a ese nombre, para usarlo se debe hacer de la siguiente forma:

$(elemento).animate({width: '300px'}, 'lento');

Como pueden ver se aplica como las palabras claves que estuvimos usando, pero como sabran los valores en Javascript no son intocables y podemos redefinirlos, por ejemplo tomemos el valor default de speeds:

$.fx.speeds._default = 250;

En este caso ahora nuestra «velocidad» predeterminada dejara de ser de 400ms y pasara a ser de 250ms, para entender el concepto vamos a usarlo en nuestro codigo, para ello deben agregar esa linea al inicio del archivo codigo.js, una vez hecho esto pasemos a agregar el siguiente segmento de codigo dentrro del bloque donde monitoreamos los eventos:

function mostrarDet() {
	$(this).find('div').css({
		display: 'block',
		left: '-600px',
		top: 0
	}).each(function(indice) {
		$(this).animate({
			left: 100,
			top: 25 * indice
		});
	});
}
$('div.libro').click(mostrarDet);

Primero definiremos una funcion llamada mostrarDet con la cual mostraremos los detalles de cada libro, para eso primero seleccionaremos los div relacionados al elemento que usemos para llamar a esta funcion, en este caso sera el div libro, y a los div seleccionado le aplicaremos un css para modificar las propiedades: display, left y top; el que mas interesa es el cambio de none a block, el cual era su estado original, para poder mostrarlo, luego usaremos a each para trabajar con todos los div seleccionados, y a este le aplicaremos el metodo animate para desplazarlos a una ubicacion, por ultimo por fuera de la funcion relacionamos el click a los div con la clase libro para llamar a la funcion anterior, antes de ver como funciona les muestro como quedo este bloque de codigo:

$(document).ready(function() {
	function mostrarDet() {

		$(this).find('div').css({
			display: 'block',
			left: '-600px',
			top: 0
		}).each(function(indice) {
			$(this).animate({
				left: 100,
				top: 25 * indice
			});
		});
	}
	$('div.libro').click(mostrarDet);

	$('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
		});
	});
});

Con todo esto comentado veamos como trabaja

En el video podemos ver como funciona tanto con los efectos como sin efectos pero observen como vario la velocidad predeterminada en base al primer cambio que hicimos, pero vamos a mejorar este codigo, para ello tomaremos la funcion mostrarDet y la modificaremos de la siguiente manera::

function mostrarDet() {
	var $libro = $(this);
	if ($libro.hasClass('activo')){
		return;
	}

	$('div.libro.activo')
		.removeClass('activo')
		.children('div').fadeOut();
	$libro.addClass('activo');

	$libro.find('div').css({
		display: 'block',
		left: '-600px',
		top: 0
	}).each(function(indice) {
		$(this).animate({
			left: 100,
			top: 25 * indice
		});
	});
}

En este caso las modificaciones que hicimos son para esconder los detalles previos al nuevo seleccionado, primero definimos un objeto que tendra al elemento actual selecccionado o this, lo siguiente es un condicional donde si el elemento seleccionado tiene la clase activo y en caso de ser verdadero procede a salir de la funcion de lo contrario continua, si seguimos pasamos a seleccionar los div con la clase libro y a su vez posea la clase activo, y procedemos a removerlo para luego a todos los hijos aplicarles el metodo fadeOut para esconderlos, despues tomamos nuevamente el elemento seleccionado y le aplicamos la clase activo, y este sera la encargada de hacer la magia anterior, despues de esto hacemos lo mismo que antes, la unica modificacion fue sacar el this y usamos el objeto que definimos al comienzo, con esto comentado veamos como funciona ahora

Ya hemos mejorado bastante nuestra pagina,, por el momento vamos a dejarlo aqui pero aun se puede mejorar mucho mas, antes de finalizar les dejo los codigos finales trabajados en este post:

En resumen, hoy hemos visto al verdadero objeto encargado de manipular nuestros efectos, hemos visto como desactivarlos y activarlos, despues como variar su velocidad o duracion, y un ejemplo practico, 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.