jQuery | Métodos Ocultar/Mostrar, Alternar y Desvanecer con ejemplos

jQuery proporciona una interfaz trivialmente simple para hacer varios tipos de efectos sorprendentes. Los métodos de jQuery nos permiten aplicar rápidamente efectos de uso común con una configuración mínima.

jQuery ocultar() y mostrar()

• jQuery hide() : oculta la sintaxis o el elemento de html que desea ocultar.

  $(selector).hide(speed, callback);

• jQuery show() : Muestra la sintaxis o el elemento de html que desea que vea el usuario.

  $(selector).show(speed, callback);

Para las dos sintaxis anteriores, el parámetro de velocidad es un parámetro opcional que se utiliza para definir la velocidad de ocultación y visualización del contenido de html. Las duraciones se pueden especificar usando una de las strings predefinidas ‘lenta’ o ‘rápida’, o en un número de milisegundos, para mayor precisión; los valores más altos indican animaciones más lentas.
El parámetro de devolución de llamada es un parámetro opcional que se utiliza después de que se completa la función de ocultar y mostrar.

Ejemplo:
el método hide() simplemente establece la visualización de estilo en línea: ?none para los elementos seleccionados. Por el contrario, el método show() restaura las propiedades de visualización del conjunto de elementos coincidentes a lo que fueran inicialmente (por lo general, bloque, en línea o bloque en línea) antes de que se les aplicara el estilo en línea de visualización:? ninguno.
Producción :

Ejemplos de parámetro de velocidad:
Ejemplo 1 :

Producción :

Ejemplo 2:

Producción :

alternar jQuery()

El método jQuery toggle() muestra u oculta los elementos de tal manera que si el elemento se muestra inicialmente, se ocultará; si está oculto, se mostrará.

Sintaxis:

$(selector).toggle(speed, callback);

Los parámetros de velocidad y devolución de llamada son los mismos parámetros opcionales que el anterior.
Ejemplo:
Salida:

Métodos de desvanecimiento de jQuery

Con la ayuda de jQuery, puede atenuar elementos HTML hacia adentro o hacia afuera como desee.
Los siguientes son los métodos de desvanecimiento:

1. jQuery fadeIn() Método:
   Sintaxis:

   $(selector).fadeIn(speed, callback);

   La función fadeIn() se usa para mostrar un elemento oculto en HTML. El parámetro opcional speed se usa para controlar la velocidad de ocultación del elemento y el segundo parámetro opcional se usa después de que se completa el desvanecimiento.
   Ejemplo:
   Salida:
2. jQuery fadeOut() Método:
   Sintaxis:

   $(selector).fadeOut(speed, callback);

   La función fadeOut() se usa para desvanecer (ocultar) un elemento en HTML. El parámetro opcional speed se usa para controlar la velocidad de visualización del elemento y el segundo parámetro opcional se usa después de que se completa el desvanecimiento.
   Ejemplo:
   Salida:
3. jQuery fadeToggle() Método:
   Sintaxis:

   $(selector).fadeToggle(speed, callback);

   La función fadeToggle() se usa para alternar entre fadeIn() y fadeOut
   . Ejemplo:
   Salida:
4. jQuery fadeTo() Método:
   Sintaxis:

   $(selector).fadeTo(speed, opacity, callback);

   La función fadeTo() permite el desvanecimiento de un elemento a una opacidad determinada (rango entre 0 y 1) y este es un campo obligatorio para completar esta función. El parámetro opcional speed se usa para controlar la velocidad de ocultación del elemento y el segundo parámetro opcional se usa después de que se completa el desvanecimiento.
   Ejemplo:
   Salida: