Menú
Está libre
registro
hogar  /  Problemas/ Jquery cambio de transparencia suave. Cómo hacer una transparencia suave de un elemento web usando jQuery

Cambio de transparencia suave de JQuery. Cómo hacer una transparencia suave de un elemento web usando jQuery

La animación en las páginas web modernas se ha dado por sentado desde hace mucho tiempo. Los elementos que se desvanecen, los mensajes voladores y las galerías de imágenes deslizantes mejoran la experiencia del usuario y aumentan el rendimiento del sitio. En la popular biblioteca de JavaScript, jQuery fadeIn () es una de las funciones básicas de animación. Controla la transparencia de los bloques.

Efectos de desvanecimiento

El método fadeIn () cambia la transparencia del elemento pasado al 100%. En la biblioteca jQuery, está emparejado con la función fadeOut (), que puede usarse para anular la transparencia y así "disolver" el elemento.

Estarás interesado en:

Se puede lograr un efecto similar con el método fadeTo (), que tiene un rango de influencia aún más amplio. FadeTo () puede establecer cualquier valor de transparencia en el rango de 0 a 1.

Sintaxis del método

El método fadeIn () en jQuery se llama en el contexto del elemento cuya opacidad debe cambiarse. Puede tomar de cero a tres parámetros:

element.fadeIn (); element.fadeIn (duración); element.fadeIn (duración, devolución de llamada); element.fadeIn (duración, suavizado, devolución de llamada); element.fadeIn (config);

El argumento de duración especifica cuánto tiempo tomará la animación. Puede ser un número que represente la cantidad de milisegundos o una de las palabras clave:

  • "rápido" (200ms);
  • "lento" (600ms);

Si no se establece una duración, el valor predeterminado es 400 milisegundos.

El parámetro de devolución de llamada denota una función que se llamará inmediatamente después de que finalice la animación. La función de devolución de llamada no acepta ningún parámetro. La variable this dentro de ella se refiere al nodo DOM que se está modificando.

El argumento de suavizado controla el tiempo de la animación, es decir, su velocidad a lo largo del tiempo. Puede usarlo para acelerar el comienzo y ralentizar el final de la animación, o para hacerla uniforme en todo momento. El valor del argumento es una cadena que contiene palabra clave, el valor predeterminado es la función "swing".

En el siguiente ejemplo, jQuery fadeIn () aumentará uniformemente la transparencia del elemento con la clase .block durante un segundo, luego de lo cual imprimirá un mensaje en la consola:

$ (". block"). fadeIn (1000, linear, function () (console.log ("Animación completada");));

Si los parámetros enumerados no son suficientes, se puede pasar al método un objeto de configuración, que puede contener hasta 11 configuraciones diferentes.

Funciones de devolución de llamada

El parámetro de devolución de llamada pasado al método jQuery fadeIn () es muy opción útil, ya que los cambios de propiedad se realizan de forma asincrónica, sin bloquear el flujo general de ejecución del código.

const callback = function () (console.log ("Animación completada");); $ (". elemento"). fadeIn (1000); llamar de vuelta ();

En este ejemplo, la función se ejecutará inmediatamente después de que comience la animación, sin esperar a que el elemento aparezca por completo.

Para que todo funcione según lo previsto, use el argumento de devolución de llamada para ver el final de la animación:

const callback = function () (console.log ("Animación completada");); $ (". elemento"). fadeIn (1000, devolución de llamada);

Ahora se mostrará un mensaje en la consola solo cuando el elemento se vuelva completamente visible.

Total transparencia y ocultación de elementos.

Como sabe, el valor cero de la propiedad de opacidad no elimina el elemento de la página, solo lo hace invisible. Este comportamiento no es adecuado si queremos ocultar un bloque.

Por lo tanto, los métodos fade de jQuery fadeIn (), fadeTo () y fadeOut () funcionan con transparencia en combinación con la propiedad de visualización. Un elemento completamente transparente se oculta usando la regla display: none, y esta regla se cancela antes de que aparezca.

efectos de jQuery

Definición y aplicación

método jQuery .desvanecerse hacia () le permite cambiar el nivel de transparencia de los elementos seleccionados.

Método .desvanecerse hacia () es similar al método .fadeIn (), pero por el contrario, le permite controlar el nivel requerido de transparencia de los elementos.

Sintaxis de jQuery:

Sintaxis 1.0:$ (selector) .fadeTo ( duración, opacidad, completo) duración- Número o cadena opacidad- Número (0-1) completo- función Sintaxis 1.4.3:$ (selector) .fadeTo ( duración, opacidad, aliviar, completo) duración- Número o cadena opacidad- Número (0-1) aliviar- Cuerda completo- función

Agregado en la versión jQuery

1.0 (sintaxis actualizada en 1.4.3)

Valores paramétricos

ParámetroDescripción
duración Una cadena o valor numérico que determina cuánto durará la animación. El valor predeterminado es 400(en milisegundos). Palabras clave de cadena "rápido" y "lento" corresponder 200 y 600 milisegundos, respectivamente (los valores altos indican una animación lenta, los valores más bajos indican rápida).
opacidad Valor numérico entre 0 y 1 que denota transparencia para el elemento ( 1 - el elemento es opaco, 0.5 - significar, 0 - el elemento es completamente transparente).
aliviar Palabra clave (cadena) que define la curva de velocidad para la animación (usando una función matemática: curva de Bézier cúbica). Sin usar complementos externos, solo tiene dos significados: lineal(efecto de animación a la misma velocidad de principio a fin) y columpio(el efecto de animación tiene un comienzo lento y un final lento, pero la velocidad aumenta en la mitad de la animación). Valor por defecto columpio.
completo La función que se ejecutará después de que finalice la animación, se llama una vez para cada elemento correspondiente. Dentro de la función, esta variable se refiere al elemento DOM al que se aplica la animación.

Ejemplo de uso

</span> Ejemplo usando el método jQuery .fadeTo ()

.desvanecerse hacia ()

antes de 0,5 en un segundo 1000 milisegundos). Tenga en cuenta que el elemento oculto es visible, esto se puede evitar utilizando la propiedad de visibilidad establecida en oculto o utilizando selectores que no afecten a los elementos necesarios.

El resultado de nuestro ejemplo:

Considere el siguiente ejemplo en el que establecemos el método desvanecerse hacia () función de devolución de llamada:

</span> Ejemplo usando el método jQuery .fadeTo () (con función de devolución de llamada)

En este ejemplo con usando jQuery método .desvanecerse hacia () cuando hacemos clic en el botón, cambiamos linealmente la transparencia de los elementos

antes de 0,4 en medio segundo 500 milisegundos). Además, cuando la animación está completa, llamamos a una función que agrega un valor variable a cada elemento. Tenga en cuenta que dentro de la función, esta variable se refiere al elemento DOM al que se aplica la animación, lo que nos permite agregar cada elemento a su vez.
como contenido de texto, el valor de la variable se incrementa en uno.

El resultado de nuestro ejemplo.

La animación en las páginas web modernas se ha dado por sentado desde hace mucho tiempo. Los elementos que se desvanecen, los mensajes voladores y las galerías de imágenes deslizantes mejoran la experiencia del usuario y aumentan el rendimiento del sitio. En la popular biblioteca de JavaScript, jQuery fadeIn () es una de las funciones básicas de animación. Controla la transparencia de los bloques.

Efectos de desvanecimiento

El método fadeIn () cambia la transparencia del elemento pasado al 100%. En la biblioteca jQuery, está emparejado con la función fadeOut (), que puede usarse para anular la transparencia y así "disolver" el elemento.

Se puede lograr un efecto similar con el método fadeTo (), que tiene un rango de influencia aún más amplio. FadeTo () puede establecer cualquier valor de transparencia en el rango de 0 a 1.

Sintaxis del método

El método fadeIn () en jQuery se llama en el contexto del elemento cuya opacidad debe cambiarse. Puede tomar de cero a tres parámetros:

Element.fadeIn (); element.fadeIn (duración); element.fadeIn (duración, devolución de llamada); element.fadeIn (duración, suavizado, devolución de llamada); element.fadeIn (config);

El argumento de duración especifica cuánto tiempo tomará la animación. Puede ser un número que represente la cantidad de milisegundos o una de las palabras clave:

  • "rápido" (200ms);
  • "lento" (600ms);

Si no se establece una duración, el valor predeterminado es 400 milisegundos.

El parámetro de devolución de llamada denota una función que se llamará inmediatamente después de que finalice la animación. La función de devolución de llamada no acepta ningún parámetro. La variable this dentro de ella se refiere al nodo DOM que se está modificando.

El argumento de suavizado controla el tiempo de la animación, es decir, su velocidad a lo largo del tiempo. Puede usarlo para acelerar el comienzo y ralentizar el final de la animación, o para hacerla uniforme en todo momento. El valor del argumento es una cadena que contiene la palabra clave, por defecto esta es la función "swing".

A continuación, fadeIn () aumentará uniformemente la transparencia del elemento con clase .block durante un segundo, después de lo cual imprimirá un mensaje en la consola:

$ (". block"). fadeIn (1000, linear, function () (console.log ("Animación completada");));

Si los parámetros enumerados no son suficientes, se puede pasar al método un objeto de configuración, que puede contener hasta 11 configuraciones diferentes.

Funciones de devolución de llamada

El parámetro de devolución de llamada pasado al método fadeIn () de jQuery es una opción muy útil porque los cambios de propiedad se realizan de forma asincrónica sin bloquear el flujo general de ejecución del código.

Const callback = function () (console.log ("Animación completada");); $ (". elemento"). fadeIn (1000); llamar de vuelta ();

En este ejemplo, la función se ejecutará inmediatamente después de que comience la animación, sin esperar a que el elemento aparezca por completo.

Para que todo funcione según lo previsto, use el argumento de devolución de llamada para ver el final de la animación:

Const callback = function () (console.log ("Animación completada");); $ (". elemento"). fadeIn (1000, devolución de llamada);

Ahora se mostrará un mensaje en la consola solo cuando el elemento se vuelva completamente visible.

Total transparencia y ocultación de elementos.

Como sabe, el valor cero de la propiedad de opacidad no elimina el elemento de la página, solo lo hace invisible. Este comportamiento no es adecuado si queremos ocultar un bloque.

Por lo tanto, los métodos fade de jQuery fadeIn (), fadeTo () y fadeOut () funcionan con transparencia en combinación con la propiedad de visualización. Un elemento completamente transparente se oculta usando la regla display: none, y esta regla se cancela antes de que aparezca.

Cambia el nivel de transparencia de los elementos seleccionados en la página. Le permite cambiar la transparencia sin problemas. El método tiene dos casos de uso:

duración- la duración del cambio de transparencia. Se puede especificar en milisegundos o en el valor de cadena "rápido" o "lento" (200 y 600 milisegundos).
opacidad- el valor de la transparencia requerida. Debe especificarse como un número de 0 a 1 (0 - transparencia total, 1 - sin transparencia).
llamar de vuelta- la función especificada como el controlador de finalización del cambio de transparencia. No se le pasan parámetros, sin embargo, dentro de la función, esta variable contendrá el objeto DOM del elemento cuya transparencia se cambia. Si hay varios de estos elementos, se llamará al controlador por separado para cada elemento.

duración- ver descripción arriba. Por defecto, el parámetro es 400
opacidad- véase más arriba.
aliviar- la dinámica del cambio de transparencia (si se ralentizará al final de la ejecución o, por el contrario, se acelerará). (Ver la descripción)
llamar de vuelta- véase más arriba.

  • cambiar la transparencia
  • establecer transparencia en un elemento
  • establecer el nivel de transparencia en el elemento
  • transparencia del elemento
  • .desvanecerse hacia ()
  • desvanecerse hacia ()

Última modificación: 1.11.2015

Los efectos de transparencia nos permiten, al cambiar suavemente la transparencia de un elemento, ocultarlo o mostrarlo. Los efectos de transparencia se implementan utilizando los métodos fadeOut (), fadeIn (), fadeTo () y fadeToggle ().

Los métodos fadeOut (), fadeIn () y fadeToggle () tienen usos similares:

    fadeOut / fadeIn / fadeToggle (): método sin parámetros

    fadeOut / fadeIn / fadeToggle ([, suavizado] [, completo]). El parámetro de duración especifica cuánto tiempo tomará el cambio de opacidad del elemento. De forma predeterminada, su valor es 400 milisegundos.

    El parámetro de aceleración, que toma el nombre de la función de aceleración como una cadena. Por defecto, su valor es "swing". También puede utilizar los valores "lento" y "rápido", que corresponden a duraciones de efecto de 600 y 200 milisegundos.

    El parámetro completo representa una función de devolución de llamada a la que llamará el método cuando la animación haya terminado.

El método fadeTo, a diferencia de otros métodos, también acepta el parámetro de opacidad - toma un valor al que se debe cambiar la transparencia del elemento: fadeTo (duración, opacidad [, suavizado] [, completo]). El valor de opacidad varía de 0 (completamente transparente) a 1 (completamente visible).

Digamos que tenemos una imagen en la página y dos botones que cambiarán la transparencia de esta imagen:


Tenga en cuenta que el método fadeIn aumenta la transparencia al valor que tenía antes de usar el método fadeOut, y no necesariamente a 1. Es decir, en este caso, dado que el método fadeTo se aplicó al principio y la transparencia se cambió a 0.6, el El método fadeIn también aumentará la transparencia hasta 0.6.