Esta publicación explicará la implementación práctica del método fadeOut() de jQuery para la creación de un efecto de desvanecimiento suave.
¿Cómo crear efectos de desvanecimiento suaves utilizando el método fadeOut() de jQuery?
jQuery” desvanecerse() El método oculta el elemento seleccionado gradualmente disminuyendo su opacidad. Este método cambia el estado del elemento seleccionado de visible a oculto. El elemento oculto no se muestra en la página web hasta que el usuario lo muestra nuevamente usando el botón ' fundirse() ' método.
Sintaxis
$ ( selector ) . desvanecerse ( velocidad, flexibilización, devolución de llamada ) ;
La sintaxis anterior admite los siguientes parámetros opcionales para personalizar el efecto de desvanecimiento:
- velocidad: Especifica la velocidad del efecto de desvanecimiento en milisegundos. Por defecto su valor es “400ms”. Además, también admite dos valores integrados: 'lento' y 'rápido'.
- flexibilización: Muestra la velocidad de animación que se desvanece en diferentes puntos. Por defecto su valor es “swing (más lento al principio/final y lento en el medio)”. Además, también funciona en el modo “lineal (velocidad constante en la animación que se desvanece)”.
- llamar de vuelta: Define una función definida por el usuario que se ejecuta después de completar la animación que se desvanece para realizar la tarea definida.
Usemos el método definido anteriormente de manera práctica.
código HTML
Antes de pasar al método “fadeOut()”, observe el siguiente código HTML que crea un elemento “div” de muestra en el que se realizará el efecto de desvanecimiento:
< botón > desvanecerse ( Esconder Elemento ) botón >< hermano >< hermano >< identificación div = 'miDiv' estilo = 'alto: 80 px; ancho: 300 px; borde: 2 px negro sólido; margen: automático; alineación de texto: centro' >
< h2 > Bienvenido a Linuxhint h2 >
div >
En las líneas de código anteriores:
- El '
La etiqueta 'añade un elemento de botón. - El ' La etiqueta 'crea un elemento div que tiene una identificación 'myDiv' y se le aplica estilo con la ayuda de las siguientes propiedades de estilo (alto, ancho, borde, margen, alineación de texto).
- Dentro del div, el ' La etiqueta 'especifica el primer elemento de subtítulo del nivel 2.
Ahora, comience con el primer ejemplo.
Ejemplo 1: crear efectos de desvanecimiento suaves con el valor predeterminado de fadeOut()
El primer ejemplo oculta el elemento div coincidente utilizando el método “fadeOut()” con su valor predeterminado “400ms”:
< guion >
$ ( documento ) . listo ( función ( ) {
$ ( 'botón' ) . hacer clic ( función ( ) {
$ ( '#miDiv' ) . desvanecerse ( ) ;
} ) ;
} ) ;
guion >En las líneas de código anteriores:
- En primer lugar, el “ listo() El método ejecuta las funciones dadas cuando se carga el documento HTML/DOM actual.
- A continuación, el “ hacer clic() El método ejecuta la función vinculada al hacer clic en el botón cuando se hace clic en su selector de 'botón' asociado.
- Después de eso, el “ desvanecerse() El método oculta el elemento div al que se accede cuya identificación es “myDiv” en 400 ms, es decir, el valor predeterminado.
Producción
Se observa que el clic del botón dado desvanece el elemento div gradualmente en “400 ms”.
Ejemplo 2: crear efectos de desvanecimiento suaves con el parámetro de “velocidad” fadeOut()
Este ejemplo utiliza el método “fadeOut()” con los valores incorporados (lento/rápido) del parámetro “velocidad”:
< guion >
$ ( documento ) . listo ( función ( ) {
$ ( 'botón' ) . hacer clic ( función ( ) {
$ ( '#miDiv' ) . desvanecerse ( 'lento' ) ;
} ) ;
} ) ;
guion >Ahora el ' desvanecerse() 'El método pasa el' lento ”valor como parámetro para crear suavemente el efecto de desvanecimiento, es decir, cambia el estado del elemento div seleccionado de visible a oculto.
Producción
Se puede ver que el elemento div seleccionado se oculta lentamente al hacer clic en el botón.
Ejemplo 3: Crear efectos de desvanecimiento suaves con el parámetro “duración” fadeOut()
Este ejemplo aplica el método “fadeOut()” con un número específico de milisegundos como parámetro de duración:
< guion >
$ ( documento ) . listo ( función ( ) {
$ ( 'botón' ) . hacer clic ( función ( ) {
$ ( '#miDiv' ) . desvanecerse ( 6000 ) ;
} ) ;
} ) ;
guion >Ahora, el método “fadeOut()” utiliza el número de milisegundos especificado para ocultar el elemento coincidente en el tiempo dado.
Producción
El resultado anterior oculta los cambios del elemento div dado al hacer clic en un botón en un intervalo de tiempo determinado.
Ejemplo 4: Crear efectos de desvanecimiento suaves con la función de “devolución de llamada” fadeOut()
Este ejemplo ejecuta una función de devolución de llamada al finalizar el efecto de desvanecimiento mediante el método “fadeOut()”:
< guion >
$ ( documento ) . listo ( función ( ) {
$ ( 'botón' ) . hacer clic ( función ( ) {
$ ( '#miDiv' ) . desvanecerse ( 4000 , función ( ) {
consola. registro ( '¡El elemento div dado se ha ocultado correctamente!' )
} ) ;
} ) ;
} ) ;
guion >En el bloque de código indicado:
- El ' desvanecerse() El método desvanece el elemento div coincidente en un número específico de milisegundos y luego ejecuta la función de 'devolución de llamada' proporcionada.
- Dentro de ' llamar de vuelta función ', la' consola.log() 'Se aplica el método para mostrar la declaración especificada después de completar el efecto de 'desvanecimiento'.
Producción
Se ve que la 'consola' muestra una declaración definida en la función de devolución de llamada después de ocultar el elemento div dado.
Ejemplo 5: Crear efectos de desvanecimiento suaves con el parámetro de “alivio” fadeOut()
Este ejemplo aplica el método “fadeOut()” con los posibles valores del parámetro “easing”:
< guion >
$ ( documento ) . listo ( función ( ) {
$ ( 'botón' ) . hacer clic ( función ( ) {
$ ( '#miDiv' ) . desvanecerse ( 4000 , 'lineal' ) ;
} ) ;
} ) ;
guion >Ahora el ' desvanecerse() El método 'realiza el efecto de desvanecimiento en un número específico de milisegundos a una velocidad constante debido al' lineal ' valor.
Producción
La salida cambia el estado del elemento dado de visible a oculto a una velocidad constante. Eso es todo para implementar el efecto de 'desvanecimiento' en el elemento.
Conclusión
Para crear un efecto de desvanecimiento suave usando ' desvanecerse() ”, el usuario no requiere ningún parámetro adicional. Este método se desvanece, es decir, oculta el elemento gradualmente cambiando su opacidad. Si el usuario necesita realizar un efecto de desvanecimiento en un número específico de milisegundos, ejecute una función de devolución de llamada y luego use los parámetros 'velocidad', 'alivio' y 'devolución de llamada' con el método 'fadeOut()'. Esta publicación explica prácticamente el método fadeOut() de jQuery para la creación de un efecto de desvanecimiento suave.