Métodos de desvanecimiento de jQuery explicados

La decoloración es la propiedad que permite manipular la opacidad (transparencia) de los elementos HTML. JQuery ofrece cuatro métodos de desvanecimiento que le permiten cambiar la transparencia de los elementos. Estos métodos incluyen, fadein (), fadeout (), fadetoggle () y fadeto ().

Este artículo explora los métodos de desvanecimiento en jQuery y sirve a los siguientes resultados de aprendizaje.

• Trabajo de métodos de desvanecimiento de jQuery
• Uso de métodos de desvanecimiento de jQuery

Cómo usar métodos de desvanecimiento jQuery

Como se discutió anteriormente, JQuery tiene cuatro métodos de desvanecimiento y se proporciona una visión profunda de todos esos métodos aquí.

Cómo usar el método Fadein ()

El método Fadein () muestra el elemento aumentando la opacidad. La sintaxis de este método se proporciona a continuación:

$ (selector).Fadein (velocidad, devolución de llamada);

La sintaxis tiene las siguientes instancias

• selector puede ser cualquier elemento o puede referirse a la clase o ID de cualquier elemento.
• velocidad se puede especificar en cualquiera de los cuatro valores: lento, medio, rápido y milisegundos.
• llamar de vuelta es el parámetro opcional y se ejerce después de que la función se ejecuta correctamente.

Ejemplo

El código que se proporciona a continuación muestra el uso del método jQuery Fadery ().

jQuery

$ (documento).Ready (function ()
ps.fundirse").hacer clic (function ()
ps.lento").Fadein ("lento");
ps.rápido").Fadein ("rápido");
ps.Mili ").Fadein (2000);
);
);

El código se describe como,

• .fundirse se refiere a la clase de botón y al hacer clic en el botón, se desvanecerá en los párrafos
• el .lento, .rápido y .mili Las clases se refieren a tres párrafos que se desvanecerán a varias velocidades

Nota: La propiedad de visualización del elemento (que va a desvanecer) debe establecerse en ninguno.

Producción

A medida que nos estamos desvaneciendo y la propiedad de visualización de los párrafos se establece en ninguno. Por lo tanto, los párrafos estarán ocultos en ejecutar la página.

Después de hacer clic en el botón, observará que los párrafos aparecerán dependiendo de la velocidad como se muestra en la imagen a continuación.

Cómo usar el método Fadeout ()

El método Fadeout () se desvanece del elemento mostrado al disminuir la opacidad del elemento. La sintaxis de este método se proporciona a continuación:

$ (selector).Fadeout (velocidad, devolución de llamada);

Ejemplo

El código escrito a continuación muestra el uso del método jQuery fadery ().

El código anterior se describe como,

• .desvanecimiento Se utiliza la clase de botón que se desvanecerá los párrafos
• el .lento, .rápido y .mili están los nombres de clase establecidos para párrafos y se utilizarán para desvanecerse, así como para el estilo

Producción

En el método Fadeout (), los párrafos se mostrarán como se muestra a continuación.

Después de hacer clic en el botón, los párrafos se desvanecerán.

Cómo usar el método fadeto ()

El método fadeto () funciona en los principios del método Fadeout (). Sin embargo, Fadeto () se desvanece del elemento usando un rango numérico (0-1). Este rango de opacidad define el nivel de opacidad del elemento, cuanto mayor sea el número más alto será la opacidad y viceversa. La sintaxis se proporciona a continuación:

$ (selector).fadeto (velocidad, opacidad, devolución de llamada);

El parámetro de opacidad acepta el valor de 0 a 1.

Ejemplo

El código proporcionado a continuación practica el método fadeto ().

El código se describe como,

• .desvanecerse hacia se refiere a la clase de botón
• el #min, #avg y #max Representa las ID de tres etiquetas DIV, y estas ID se refieren a los valores que se utilizarán para el método Fadeto ()
• El valor de desvanecimiento varía de 0 a 1 en métodos fadeto ()

Producción

Antes de aplicar el método fadeto ()

Después de aplicar el método fadeto ()

De la salida anterior, se observa que el párrafo que tiene valor 0 se ha lavado.

Cómo usar el método fadetoggle ()

El método Fadetoggle () se encuentra entre los métodos Fadein () y FadeOut (). Al usar fadetoggle (), puede mostrar un elemento oculto y puede ocultar un elemento mostrado. La sintaxis de este método es:

$ (selector).fadeto (velocidad, devolución de llamada);

Ejemplo

El código proporcionado a continuación funciona para usar el método fadetoggle ().

• .fadetoggle La clase se refiere al botón
• el #Lento, #fast y #mili representa varias identificaciones de div

Producción

Antes de hacer clic en el botón

Después de hacer clic en el botón,

Se concluye que, si se muestra el elemento, se ocultará después del método fadetoggle () (como lo hace el método Fadeout ()). Del mismo modo, si el elemento está en el estado Fadeout (), entonces el Fadetoggle () actuará como un método Fadein ().

Conclusión

JQuery proporciona varios métodos de desvanecimiento que incluyen FadeIn (), FadeOut (), Fadetoggle () y Fadeto () que ayudan a desvanecer los elementos HTML. Esta guía proporciona el trabajo y el uso de cada método de desvanecimiento de jQuery. El método FadeIn () muestra el elemento si está oculto mientras que el FadeOut () oculta el elemento. El método fadeto () se desvanece o salida dependiendo del número de opacidad. Por último, el método FADETOGGLE () funciona entre los métodos FadeIn () y FadeOut ().