Introducción a los Efectos

Introducción

Bienvenido a la documentación de jQuery. Esta práctica te dará una introducción a los efectos.

jQuery hace que sea trivial agregar efectos simples a tu página. Los efectos pueden utilizar los ajustes predeterminados o proporcionar una duración personalizada. También puedes crear animaciones personalizadas de propiedades CSS arbitrarias.

Skills Graph

Mostrando y Ocultando Contenido

index.html ya se ha proporcionado en la VM.

jQuery puede mostrar u ocultar contenido instantáneamente con .show() o .hide():

// Ocultar instantáneamente todos los párrafos
$("p").hide();

// Mostrar instantáneamente todos los divs que tienen la clase de estilo oculta
$("div.hidden").show();

Cuando jQuery oculta un elemento, establece su propiedad CSS display en none. Esto significa que el contenido tendrá un ancho y altura de cero; no significa que el contenido simplemente se tornará transparente y dejará un área vacía en la página.

jQuery también puede mostrar u ocultar contenido mediante efectos de animación. Puedes decir a .show() y .hide() que usen animación de varias maneras. Una es pasar un argumento de 'slow', 'normal' o 'fast':

// Ocultar lentamente todos los párrafos
$("p").hide("slow");

// Mostrar rápidamente todos los divs que tienen la clase de estilo oculta
$("div.hidden").show("fast");

Si prefieres un control más directo sobre la duración del efecto de animación, puedes pasar la duración deseada en milisegundos a .show() y .hide():

// Ocultar todos los párrafos en medio segundo
$("p").hide(2000);

// Mostrar todos los divs que tienen la clase de estilo oculta en 1,25 segundos
$("div.hidden").show(1250);

La mayoría de los desarrolladores pasan un número de milisegundos para tener un control más preciso sobre la duración.

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Cambiar la Visibilidad Basada en el Estado de Visibilidad Actual

jQuery también te permite cambiar la visibilidad de un contenido basado en su estado de visibilidad actual. .toggle() mostrará el contenido que actualmente está oculto y ocultará el contenido que actualmente es visible. Puedes pasar los mismos argumentos a .toggle() que pasas a cualquiera de los métodos de efectos anteriores.

// Alternar instantáneamente la visualización de todos los párrafos
$("p").toggle();

// Alternar la visualización de todos los divs en 1,8 segundos
$("div").toggle(1800);

.toggle() usará una combinación de efectos de deslizamiento y desvanecimiento, al igual que .show() y .hide().

Puedes actualizar la pestaña Web 8080 para previsualizar la página web.

Algo Después de que una Animación Finalice

Un error común al implementar efectos de jQuery es suponer que la ejecución del siguiente método en tu cadena esperará hasta que la animación termine de ejecutarse.

$("div.hidden").fadeIn(1500).addClass("lookAtMe");

Es importante entender que .fadeIn() arriba solo inicia la animación. Una vez iniciada, la animación se implementa cambiando rápidamente las propiedades CSS en un bucle setInterval() de JavaScript. Cuando llamas a .fadeIn(), inicia el bucle de animación y luego devuelve el objeto jQuery, pasándolo a .addClass() que luego agregará la clase de estilo lookAtMe mientras el bucle de animación acaba de comenzar.

Para diferir una acción hasta después de que una animación haya terminado de ejecutarse, necesitas usar una función de devolución de llamada de animación. Puedes especificar tu devolución de llamada de animación como el segundo argumento pasado a cualquiera de los métodos de animación discutidos anteriormente. Para el fragmento de código anterior, podemos implementar una devolución de llamada de la siguiente manera:

// Desvanecer hacia dentro todos los párrafos ocultos; luego agregue una clase de estilo a ellos (correcto con devolución de llamada de animación)
$("div.hidden").fadeIn(1500, function () {
  // this = elemento DOM que acaba de terminar de ser animado
  $(this).addClass("lookAtMe");
});

Tenga en cuenta que puede usar la palabra clave this para hacer referencia al elemento DOM que está siendo animado. También tenga en cuenta que la devolución de llamada se llamará para cada elemento en el objeto jQuery. Esto significa que si tu selector no devuelve ningún elemento, tu devolución de llamada de animación nunca se ejecutará! Puedes resolver este problema probando si tu selección devolvió algún elemento; si no es así, puedes simplemente ejecutar la devolución de llamada inmediatamente.

// Ejecute una devolución de llamada incluso si no hubo elementos para animar
var someElement = $("#nonexistent");

var cb = function () {
  console.log("hecho!");
};

if (someElement.length) {
  someElement.fadeIn(300, cb);
} else {
  cb();
}

Puedes actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicitaciones! Has completado la práctica de Introducción a los Efectos. Para aprender más sobre la API de jQuery, consulta la documentación oficial de jQuery.