Efectos básicos con JQuery

Para poder mejorar la experiencia de usuario, tenemos a nuestra disposición una serie de efectos listos para usar con JQuery. Es increíble la cantidad de plugins que circulan ya por la red pero, por el momento, me parece importante ir conociendo poco a poco la base de esta gran librería para poder hacer nuestro pinitos más adelante 🙂

En primer lugar, para no ser repetitiva, comentar que todos los efectos aceptan como parámetro una función de callback, la cual se lanzará una vez haya finalizado la animación. Veremos algunos ejemplos. Además, como primer parámetro, se puede especificar una velocidad para manipular el tiempo que durará la animación. Los valores que aceptan son: slow, normal, fast el tiempo en milisegundos.
Por otro lado, los efectos show, hide y toggle pueden ser invocados sin parámetros, obviando la velocidad de la animación.

  • Show: Muestra aquellos elementos, localizados a través del selector, modificando el estilo de display a block con un tiempo de duración específico.
    $("#btnShow").click(function() {
    $("#divEffect").show("slow", function() { alert("Terminó el efecto show") });
    });

  • Hide: Oculta los elementos seleccionados.
    $("#btnHide").click(function() {
    $("#divEffect").hide();
    });

  • Toggle: Es la función perfecta para no tener que implementar show & hide. En realidad, comprueba el valor de display y realiza la opuesta a la actual. También es posible utilizar una condición que actue de switch donde true muestra todos los elementos involucrados y false los oculta.
    $("#btnToggle").click(function() {
    $("#divEffect").toggle(1500);
    });

  • SlideDown: El efecto consiste en aumentar la altura (height)
    $("#btnSlideDown").click(function() {
    $("#divEffect").slideDown("fast");
    });

  • SlideUp: Produce el efecto contrario que slideDown, disminuyendo la altura de los elementos.
    $("#btnSlideUp").click(function() {
    $("#divEffect").slideUp(3000);
    });

  • SlideToggle: Determina el efecto a realizar entre, slideDown y slideUp.
    $("#btnSlideToggle").click(function() {
    $("#divEffect").slideToggle(200);
    });

  • FadeIn: En este caso, estamos jugando con la opacidad de los elementos. Con fadeIn podemos mostrar uno o varios elementos a la velocidad indicada aumentando la propiedad opacity de su style.
    $("#btnFadeIn").click(function() {
    $("#divEffect").fadeIn("slow");
    });

  • FadeOut: De manera contraria, disminuye la opacidad de los elementos hasta su desaparición.
    $("#btnFadeOut").click(function() {
    $("#divEffect").fadeOut(5000);
    });

  • FadeTo: Si solamente queremos llegar a un grado de opacidad, sin que desaparezca del todo, podemos utilizar fadeTo. Además de utilizar la velocidad como primero, tenemos la posibilidad de pasarle el grado de opacidad que necesitamos para nuestros elementos. Al igual que el resto, tendría un tercer parámetro para la función de callback.
    $("#btnFadeTo").click(function() {
    $("#divEffect").fadeTo(5000, 0.20);
    });

  • Animate: En realidad, si pensamos en todos los efectos anteriores, lo que estamos haciendo es jugar con los estilos de los elementos y, como valor añadido, dándole una velocidad o duración. Si quisiéramos componer nuestro propio efecto o animación la función animate podría ser bastante útil. Existen dos formas de configurar las animaciones: todos los cambios de estilo al unísono o bien de forma secuencial.
    $("#btnAnimate").click(function() {
    $("#divEffect").animate({
    width: "500px",
    height: "400px"
    }, 2000);
    });
    $("#btnAnimateSec").click(function() {
    $("#divEffect").animate({
    width: "200px"
    }, 2000)
    .animate({
    height: "200px"
    }, 2000, function() { alert("Animación finalizada!!") });
    });

  • Stop: Permite detener la animación antes de que finalice.
    $("#btnStop").click(function() {
    $("#divEffect").stop();
    });

  • jQuery.fx.off: Si actualizamos la siguiente variable global a true, deshabilitamos todas las animaciones de nuestra aplicación. Esto no significa que el cambio de estilo no se lleve a cabo pero no se tendrá en cuenta la velocidad del efecto.
    $("#btnAnimationOff").click(function() {
    jQuery.fx.off = true;
    });
    $("#btnAnimationOn").click(function() {
    jQuery.fx.off = false;
    });

Os dejo el proyecto con todas las demos de este post 😉

¡Saludos!

4 comentarios sobre “Efectos básicos con JQuery”

Responder a gtorres Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *