Esta publicación destaca las diferencias clave entre hide() y fadeOut(), show() y fadeIn() en jQuery.
Antes de pasar a la diferencia entre hide() y fadeOut(), show() y fadeIn() en jQuery, primero mira los conceptos básicos de estos métodos leyendo las siguientes guías:
- Método fadeIn() de jQuery
- Método fadeOut() de jQuery
- Método JavaScript JQuery Hide() | Explicado
- Método JQuery Show() | Explicado
Primero, vea la diferencia entre los métodos hide() y fadeOut() en jQuery.
Diferenciar entre hide() y fadeOut() en jQuery
La única diferencia principal entre ' esconder() ' y ' desvanecerse() El método es:
- Intervalo de tiempo : El ' esconder() El método 'de forma predeterminada oculta el elemento cambiando su opacidad de 100 a 0 inmediatamente sin consumir ningún intervalo de tiempo, mientras que el método' desvanecerse() 'El método se desvanece, es decir, oculta el elemento gradualmente en '400 ms', que es su valor predeterminado.
Veamos la implementación práctica de la diferencia indicada.
Primero mire el siguiente código HTML:
< centro >< identificación h2 = 'H2' > Bienvenido a Linuxhint ! h2 >
< botón > Ocultar elemento botón >
centro >
En las líneas de código anteriores:
- El '
La etiqueta 'ajusta la alineación de los elementos dados en el centro de la página web. - El ' La etiqueta 'crea un subtítulo de nivel 2 con una identificación 'H2'.
- El '
La etiqueta 'inserta un nuevo botón.
Nota: El código HTML anterior se sigue a lo largo de esta guía.
Ejemplo: aplicar el método jQuery “hide()” con el valor “predeterminado”
Este ejemplo aplica “hide()” con sus valores predeterminados para ocultar un elemento:
< guion >$ ( documento ) . listo ( función ( ) {
$ ( 'botón' ) . hacer clic ( función ( ) {
$ ( '#H2' ) . esconder ( ) ;
} ) ;
} ) ;
guion >
En las líneas de código anteriores:
- En primer lugar, el “ listo() El método 'se aplica para ejecutar las funciones especificadas cuando se carga el documento HTML actual.
- A continuación, el “ hacer clic() El método 'es responsable de llevar a cabo la función vinculada al hacer clic en el botón.
- Después de eso, el “ esconder() El método oculta el elemento de encabezado al que se accede inmediatamente cuya identificación es “H2”.
Producción
Se puede ver que el elemento de encabezado se oculta inmediatamente al hacer clic en el botón.
Ejemplo: aplicar el método jQuery “fadeOut()” con el valor “predeterminado”
Este ejemplo utiliza el método 'fadeOut()' con sus valores predeterminados para ocultar gradualmente el elemento dado en '400ms'.
En este escenario se cambia el contenido del elemento 'botón':
< botón > desvanecerse ( Esconder Elemento ) botón >Ahora implemente el método “fadeOut()” de esta manera:
< guion >$ ( documento ) . listo ( función ( ) {
$ ( 'botón' ) . hacer clic ( función ( ) {
$ ( '#H2' ) . desvanecerse ( ) ;
} ) ;
} ) ;
guion >
En este momento, el “ desvanecerse() 'Se aplica el método para atenuar el elemento de encabezado al que se accede con 400 ms, es decir, el valor predeterminado.
Producción
El resultado muestra claramente que el clic en el botón oculta el elemento de encabezado gradualmente en el intervalo de tiempo predeterminado, es decir, '400 ms'.
Diferenciar entre show() y fadeIn() en jQuery
Similar a los métodos “hide()” y “fadeOut()”, la misma diferencia existe entre el método “show()” y “fadeIn()”:
- Intervalo de tiempo : El ' espectáculo() El método 'de forma predeterminada muestra el elemento oculto cambiando su opacidad de 0 a 100 inmediatamente, mientras que el método' fundirse() El método muestra el elemento oculto gradualmente en “400 ms”, que es su valor predeterminado.
Ejemplo: aplicar el método jQuery “show()” con el valor “predeterminado”
Este ejemplo aplica 'show()' con sus valores predeterminados para mostrar el elemento oculto.
Primero mire el bloque de código HTML proporcionado:
< centro >< botón > Mostrar elemento botón >
< identificación h2 = 'H2' estilo = 'pantalla: ninguna' > Bienvenido a Linuxhint ! h2 >
centro >
Según este escenario, el elemento de encabezado dado se oculta con la ayuda de ' pantalla: ninguna ' propiedad.
Ahora, siga el bloque de código proporcionado para comprender la implementación práctica del método 'show()':
< guion >$ ( documento ) . listo ( función ( ) {
$ ( 'botón' ) . hacer clic ( función ( ) {
$ ( '#H2' ) . espectáculo ( ) ;
} ) ;
} ) ;
guion >
El bloque de código anterior utiliza el ' espectáculo() 'Método para mostrar el elemento oculto agregado inmediatamente.
Producción
Se puede ver que al hacer clic en el botón se muestra inmediatamente el elemento de encabezado oculto.
Ejemplo: aplicar el método jQuery “fadeIn()” con el valor “predeterminado”
Este ejemplo muestra el elemento oculto usando el método 'fadeIn()' con el valor predeterminado ' 400ms ”:
El texto del elemento del botón se cambia según el escenario dado:
< botón > fundirse ( Espectáculo Elemento ) botón >Ahora, aplica el “ fundirse() ”Método usando el siguiente bloque de código:
< guion >$ ( documento ) . listo ( función ( ) {
$ ( 'botón' ) . hacer clic ( función ( ) {
$ ( '#H2' ) . fundirse ( ) ;
} ) ;
} ) ;
guion >
En este bloque de código, el ' fundirse() 'El método se utiliza para mostrar el elemento oculto que coincide con la identificación 'H2' en 400 ms, es decir, el valor predeterminado.
Producción
Se puede observar que al hacer clic en el botón se muestra el elemento oculto gradualmente en el intervalo de tiempo predeterminado, es decir, '400 ms'.
Conclusión
En jQuery, la única diferencia clave entre esconder() y desvanecerse() , espectáculo() , y fundirse() método es “ Intervalo de tiempo ”. Los métodos “show()” y “hide()” realizan sus funciones inmediatamente de forma predeterminada, mientras que los métodos “fadeIn()” y “fadeOut()” realizan sus tareas en el intervalo de tiempo predeterminado, es decir, “400 ms”. Esta publicación prácticamente explicó las diferencias clave entre hide() y fadeOut(), show() y fadeIn() en jQuery.