jQuery / efectos simultaneos vs encolados

Bienvenidos sean a este post, hoy nos adentraremos un poco mas.

En este post hablamos sobre el metodo animate, y ahondamos un poco mas en el post anterior, pero aqui veremos como son los efectos simultaneos y los encolados (queued), vamos a tomar una parte del codigo que vimos en el post anterior:

$cambiador.css({
	position: 'relative'
	}).animate({
		borderWidth: '5px',
		left: ancho - cambAncho,
		height: '+=20px'
	}, 'slow');

En este caso aplicamos tres propiedades al mismo tiempo pero tranquilamente podriamos haberlo hecho de esta forma:

$cambiador
	.css({ position: 'relative' })
	.animate({ borderWidth: '5px' }, 'slow')
	.animate({ left: ancho - cambAncho }, 'slow')
	.animate({ height: '+=20px' }, 'slow');

Es exactamente lo mismo a lo anterior pero tiene una mejor legibilidad con respecto al anterior, puede que sea mas engorroso por el hecho de repetir los llamados a animate pero que sucede si queremos encolar distintos efectos? para ello debemos tomar el codigo que vimos en el post anterior y trabajaremos con el, en caso de no tenerlo les dejo a continuacion un link con todos los archivos:

Simplemente extraigan los archivos a un directorio, una vez realizado nuestro siguiente paso sera ir al archivo codigo.js y modificaremos el siguiente segmente de codigo:

$(document).ready(function() {
	$('#encabezado').click(function() {
		var ancho=$('div.capitulo p').outerWidth();
		var $cambiador=$('#cambiador');
		var cambAncho=$cambiador.outerWidth();
		$cambiador.css({
			position: 'relative'
			}).animate({
				borderWidth: '5px',
				left: ancho - cambAncho,
				height: '+=20px'
			}, 'slow');
	});
});

De la siguiente manera:

$(document).ready(function() {
	$('#encabezado').click(function() {
		var ancho=$('div.capitulo p').outerWidth();
		var $cambiador=$('#cambiador');
		var cambAncho=$cambiador.outerWidth();
		$cambiador
			.css({ position: 'relative'})
			.fadeTo('fast',0.5)
			.animate({ left: ancho - cambAncho }, 'slow')
			.fadeTo('slow', 1.0)
			.slideUp('slow')
			.slideDown('slow');
	});
});

Este bloque es muy parecido al anterior pero los cambios viene a partir de que aplicamos el metodo css a cambiador, veamos cada una de las acciones que asignamos:

• La primera establece la opacidad del div a la mitad y de forma rapida
• la siguiente se encarga de mover el div a la derecha
• despues volvemos a poner la opacidad del div en su totalidad
• luego lo enrollamos
• finalmente lo desenrollamos

Vamos a ver como funcionan mediante el siguiente video

Como pueden ver ejecuta cada accion solo despues que el anterior termino pero nosotros podemos hacer que esto no suceda y para ello debemos modificar el siguiente segmento de codigo:

$cambiador
	.css({ position: 'relative'})
	.fadeTo('fast',0.5)
	.animate({ left: ancho - cambAncho }, 'slow')
	.fadeTo('slow', 1.0)
	.slideUp('slow')
	.slideDown('slow');

De la siguiente manera:

$cambiador
	.css({ position: 'relative'})
	.fadeTo('fast',0.5)
	.animate({ 
		left: ancho - cambAncho
		}, {
		duration: 'slow',
		queue: false
	})
	.fadeTo('slow', 1.0)
	.slideUp('slow')
	.slideDown('slow');

En este caso solo modificamos la parte correspondiente al llamado al metodo animate, donde utilizamos la sintaxis que recibe un objeto para las propiedades y otro para las opciones y en este ultimo le indicamos que no espere o encole la accion de este llamado, por lo tanto ahora el movimiento se deberia hacer al mismo tiempo que desvanecemos con fadeTo al div, veamos como trabaja ahora con el siguiente video

Como pueden ver se ejecuto las dos primeras acciones al mismo tiempo y a su vez vemos que lo demas sigue funcionando como antes, ya sean los efectos posteriores como las acciones en los otros botones, pero tambien tenemos la posibilidad de poder hacer esto de forma manual para ello tomaremos el segmento anterior y lo cambiaremos de la siguiente manera:

$(document).ready(function() {
	$('#encabezado').click(function() {
		var ancho=$('div.capitulo p').outerWidth();
		var $cambiador=$('#cambiador');
		var cambAncho=$cambiador.outerWidth();
		$cambiador
			.css({ position: 'relative'})
			.fadeTo('fast',0.5)
			.animate({ left: ancho - cambAncho
			}, {
				duration: 'slow',
				queue: false
			})
			.fadeTo('slow', 1.0)
			.slideUp('slow')
			.queue(function(prox) {
				$cambiador.css({
					backgroundColor: '#f00'});
					prox();
				})
			.slideDown('slow');
	});
});

Basicamente es muy similar a lo que vimos anteriormente pero agregamos a la funcion queue la cual nos permite agregar uua funcion a la lista o cola de efectos, en este caso usamos una funcion anonima pero con una curiosidad, usamos un argumento llamado prox, ya veremos porque, dentro de la funcion cambiaremos el color de fondo en el div y despues usaremos al argumento como funcion, esto nos permitira que la cola de animacion retome desde donde lo dejamos, con esto comentado pasemos a ver como trabaja mediante el siguiente video

En el video podemos ver como cambia de color entre la accion de enrollar y desenrollar, pero no necesariamente esto es asi solammente porque como mencionamos en este post, tambien podemos usar un metodo, para ello tomemos el codigo anterior y hagamos el siguiente cambio:

$(document).ready(function() {
	$('#encabezado').click(function() {
		var ancho=$('div.capitulo p').outerWidth();
		var $cambiador=$('#cambiador');
		var cambAncho=$cambiador.outerWidth();
		$cambiador
			.css({ position: 'relative'})
			.fadeTo('fast',0.5)
			.animate({ left: ancho - cambAncho
			}, {
				duration: 'slow',
				queue: false
			})
			.fadeTo('slow', 1.0)
			.slideUp('slow', function(){
				$cambiador.css({ backgroundColor: '#f00'} );
				})
			.slideDown('slow');
	});
});

Este bloque hace exactamente lo mismo que el anterior pero en lugar de usar a queue aplicamos la funcion al slideUp lo cual nos evita tener que usar la variable y llamarla como funcion para pasar a la sigueinte animacion en la lista, igualmente no descarten al queue porque es util para acciones mas complejas, esto esta bien para un solo elemento pero si tenemos que trabajar en mas de uno? bueno para esto vamos a hacer una modificacion en el archivo libro.html, en el div identificado como cap-1 agregaremos dos parrafos nuevos, este div debera quedar de la siguiente manera:

<div class="capitulo" id="cap-1">
	<h3 class="capitulo-titulo">1. El bajorrelieve de arcilla</h3>
	<p>No hay en el mundo fortuna mayor, creo, que la incapacidad de la mente humana para relacionar entre sí todo lo que hay en ella. Vivimos en una isla de plácida ignorancia, rodeados por los negros mares de lo infinito, y no es nuestro destino emprender largos viajes. Las ciencias, que siguen sus caminos propios, no han causado mucho daño hasta ahora; pero algún día la unión de esos disociados conocimientos nos abrirá a la realidad, y a la endeble posición que en ella ocupamos, perspectivas tan terribles que enloqueceremos ante la revelación, o huiremos de esa funesta luz, refugiándonos en la seguridad y la paz de una nueva edad de las tinieblas. Algunos teósofos han sospechado la majestuosa grandeza del ciclo cósmico del que nuestro mundo y nuestra raza no son más que fugaces incidentes. Han señalado extrañas supervivencias en términos que nos helarían la sangre si no estuviesen disfrazados por un blando optimismo. Pero no son ellos los que me han dado la fugaz visón de esos dones prohibidos, que me estremecen cuando pienso en ellos, y me enloquecen cuando sueño con ellos. Esa visión, como toda temible visión de la verdad, surgió de una unión casual de elementos diversos; en este caso, el artículo de un viejo periódico y las notas de un profesor ya fallecido. Espero que ningún otro logre llevar a cabo esta unión; yo, por cierto, si vivo, no añadiré voluntariamente un sólo eslabón a tan espantosa cadena. Creo, por otra parte, que el profesor había decidido, también, no revelar lo que sabía, y que si no hubiese muerto repentinamente, hubiera destruido sus notas. </p>
	<p>Tuve por primera vez conocimiento de este asunto en el invierno de 1926-1927, a la muerte de mi tío abuelo, George Gammel Angell, profesor honorario de
lenguas semíticas de la Universidad de Brown, Povidence, Rhode Island. El profesor Angell era una autoridad vastamente conocida en materia de antiguas inscripciones y a él habían recurrido con frecuencia los conservadores de los más importantes museos. Muchos deben por lo tanto recordar su desaparición, acaecida a la edad de noventa y dos años. Las oscuras razones de su muerte aumentaron aún más el interés local. El profesor había muerto mientras volvía del barco de Newport, y, según afirman los testigos, luego de recibir el empellón de un marinero negro. Éste había surgido de uno de los curiosos y sombríos pasajes situados en la falda abrupta de la colina que une los muelles a la casa del muerto, en la Calle Williams. Los médicos, incapaces de descubrir algún desorden orgánico, concluyeron, luego de un perplejo cambio de opiniones, que la muerte debía atribuirse a una oscura lesión del corazón, determinada por el rápido ascenso de una cuesta excesivamente empinada para un hombre de tantos años. En ese entonces no vi ningún motivo para disentir de ese diagnóstico, pero hoy tengo mis dudas... y algo más que dudas.</p>
	<p>Como heredero y ejecutor de mi tío abuelo, viudo y sin hijos, era de esperar que yo examinara sus papeles con cierta atención. Trasladé con ese propósito todos sus archivos y cajas a mi casa de Boston. El material ordenado por mí será publicado en su mayor parte por la Sociedad Norteamericana de Arqueología; pero había una caja que me pareció sumamente enigmática, y sentí siempre repugnancia a mostrársela a otros. Estaba cerrada, y no encontré la llave hasta que se me ocurrió examinar el llavero que el profesor llevaba siempre consigo. Logré abrirla entonces, pero me encontré con otro obstáculo mayor y aún más impenetrable. ¿Qué significado podían tener ese curioso bajorrelieve de arcilla, y esas notas, fragmentos y recortes de viejos periódicos? ¿Se había convertido mi tío, en sus últimos años, en un devoto de las más superficiales imposturas? Resolví buscar al excéntrico escultor que había alterado la paz mental del anciano.</p>

</div>

Nota:
Ante cualquier duda recuerden que al final tienen los archivos para descargarloss.

Con esto realizado podemos volver al archivo codigo.js donde agregaremos este bloque de codigo:

$(document).ready(function() {
	$('p').eq(2).css('border', '1px solid #333');
	$('p').eq(3).css('backgroundColor', '#ccc').hide();
});

En este caso buscaremos dos parrafos (p) y por medio de eq le pasaremos cuales seran los parrafos que usaremos, y por medio de css le aplicaremos unos estilos, el primero sera para aplicarle un borde al parrafo, el segundo sera para establecer un color de fondo pero le pasamos un hide para esconder a este, si vemos la pagina y mostramos el contenido lo veran de la siguiente manera

Ahora tomemos el segmento anterior y modifiquemoslo de la siguiente manera:

$(document).ready(function() {
	$('p').eq(2)
		.css('border', '1px solid #333')
		.click(function() {
			$(this).slideUp('slow').next().slideDown('slow');
		});
	$('p').eq(3).css('backgroundColor', '#ccc').hide();
});

En este caso agregamos al primer div el evento click donde mediante el this enrollaremos a este div y con next desenrollaremos al siguiente recuerden que este es un evento posterior a lo realizado alrededor, para entenderlo mejor veamos el siguiente video

Hasta aqui hemos cubierto como son las animaciones simultaneas y las encoladas, cada uno sabra como poder aplicarlas de acuerdo a las necesidades esteticas de cada pagina, antes de finalizar les dejo un link con todos los arcihvos y codigo final visto en este post:

En resumen, hoy hemos visto como son los efectos simultaneos y los encolados, asi como son de manera predeterminado, encolados, como se puede sacarlos de esta forma, asi como tambien hemos visto como aplicar efectos a varios elementos, 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.