jQuery / Efectos disponibles

Bienvenidos sean a este post, hoy veremos una posibilidad que nos brinda el lenguaje.

Aqui veremos algunos efectos que podemos aplicar a nuestros eventos, para ello primero necesitaremos el codigo del post anterior, en caso de no tenerlo pueden descargarlo mediante el siguiente link:

Extraigan todos los archivos en un mismo directorio, con esto realizado ahora podemos pasar a hablar sobre los distintos efectos disponibles.

Manejando la velocidad

En el post anterior vimos como trabajar con los metodos show y hide para mostrar y esconder elementos respectivamente, pero estos dos metodos poseen la particularidad de poder variar su velocidad pasando un argumento, para ello disponemos de dos palabras:

• slow, establece una velocidad de 600 ms (0.6 s)
• fast, establece una velocidad de 200 ms (0.4 s)

Estos son dos palabras clave para valores predeterminados, si pasamos otra palabra este tomara otro valor que es un promedio de los dos, 400 ms, pero tambien podemos pasar un valor diferente a estos:

show(850);

En este caso al ser un numero no es nececsario pasarlo entre comillas, vamos a ver como trabaja y para ello tomaremos al archivo codigo.js y cambiaremos esta linea:

$('#cap-1').show();

De la siguiente manera:

$('#cap-1').show('slow');

En este caso le decimos que a la hora de mostrar a nuestro div llamado cap-1 de una forma mas lenta, pasemos a ver como trabaja mediante el siguiente video

Como pueden ver ahora tenemos un mejor efecto para mostrar nuestro contenido, recuerden que pueden variar la velocidad o simplemente aplicando las palabras claves que nos permite utilizar, pasemos al siguiente tema.

fadeIn y fadeOut

Los metodos show y hide son muy practicos para mostrar o esconder elementos de nuestra pagina pero tambien de otros efectos disponibles, como por ejemplo los del titulo:

• fadeIn(velocidad), es para aparecer un elemento
• fadeOut(velocidad), es para desaparecer un elemento

La velocidad es igual a lo hablado anteriormente e inclusive acepta las palabras slow y fast, volvamos al archivo codigo.js y tomemos esta linea:

$('#cap-1').show('slow');

Para modificarlo de la siguiente manera:

$('#cap-1').fadeIn('slow');

Simplemente cambiamos la funcion de show por fadeIn, con esto comentado veamos como trabaja ahora mediante el siguiente video

Un verdadero efecto maravilloso, mucho mejor que el anterior para otro tipo de necesidades pero que tambien sirve para mostrar (fadeIn) o esconder (fadeOut) elementos de la pagina, con esto comentado pasemos al siguiente tema.

slideDown y slideUp

Ya vimos como mostrar o esconder de dos formas distintas pero que nos pueden ser utiles para elementos que emergen por fuera de nuestra pagina o contenido, aqui entran en accion las funciones que tenemos en el titulo porque estas nos permiten mostrar o esconder un contenido pero en forma vertical:

• slideDown(velocidad), se encarga de mostrar el elemento
• slideUp(velocidad), se encarga de ocultar el elemento

Al igual que en los casos anteriores podemos variar la velocidad de la misma forma, podemos considerar que slideDown desenrolla el elemento y slideUp lo enrolla, para entenderlo vamos nuevamente al archivo codigo.js y cambiaremos la siguiente linea:

$('#cap-1').fadeIn('slow');

De la siguiente manera:

$('#cap-1').slideDown('slow');

En este caso simplemente cambiamos el efecto encargado de mostrar al div denominado como cap-1, para ver la diferencia utilicemos el siguiente video

Como pueden ver quedo un efeccto mas acorde al elemento que queremos mostrar, estos son solo algunos de los efectos que disponemos, otra curiosidad que disponemos es el tema de la velocidad, el cual es comun para los tres y estos pueden ajustarlos a la necesidad de los elementos que desean mostrar o esconder, antes de finalizar les dejo los codigos finales que trabajamos en este post:

En resumen, hoy hemos visto otros efectos para mostrar o esconder elementos de la pagina, el primero que vimos fue como variar la velocidad de show y hide, despues dos metodos que dan el efecto de aparecer y desaparecer, en el ultimo caso vimos otros dos metodos para darle el efecto de desenrollar y enrollar el elemento, espero les haya sido util 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.