Ocultar un elemento después de unos segundos usando JavaScript
Al diseñar una página web receptiva, puede haber un requisito para ocultar algunas funcionalidades adicionales después de un cierto tiempo para crear efectos. Por ejemplo, alertar a un usuario a través del mensaje emergente por un tiempo limitado hace maravillas para captar la atención del usuario, absteniendo así de ser ofendido. En tales escenarios, ocultar un elemento después de unos segundos usando JavaScript ayuda a que una página web o el sitio se destaque.
Este tutorial explicará el concepto de ocultar un elemento después de unos segundos usando JavaScript.
Cómo ocultar un elemento después de unos segundos en JavaScript?
Los siguientes enfoques se pueden utilizar para ocultar un elemento después de unos segundos usando JavaScript:
- "setTimeout ()"Método con el"mostrar" propiedad.
- "setTimeout ()"Método con el"visibilidad" propiedad.
- "jQuery" métodos.
Discutamos los enfoques declarados uno por uno!
Enfoque 1: Ocultar un elemento después de unos segundos en JavaScript usando el método setTimeOut () Wcon la propiedad de visualización
El "setTimeout ()El método "invoca una función después del tiempo asignado especificado. Mientras que el "mostrar"La propiedad establece el tipo de pantalla del elemento especificado. Estos enfoques se pueden implementar para asignar un tiempo establecido al elemento recuperado para que se esconda después del tiempo especificado.
Sintaxis
SetTimeout (FUNC, Milli, PAR1, PAR2)En la sintaxis dada anteriormente:
- "concurrido"Indica la función a la que se debe acceder.
- "mili"Corresponde al intervalo de tiempo en milisegundos para ejecutar.
- "par1" y "par2"Señale los parámetros adicionales.
En la sintaxis anterior:
- La propiedad de visualización del "Objeto"Se asigna como"ninguno".
Ejemplo
El siguiente ejemplo ilustra el concepto declarado:
Aplique los pasos dados a continuación, como se indica en el código anterior:
- En primer lugar, incluya un ""Elemento tiene el"SRC" y "identificación"Como sus atributos.
- En el código JS, aplique el "setTimeout ()Método de las líneas de código establecidas. El tiempo establecido, en este caso, será de 5000 milisegundos = "5" segundos.
- Dentro del método, acceda al elemento incluido por su "identificación" utilizando el "getElementById ()" método.
- Después de eso, asigne el "mostrar"Propiedad asociada con el elemento recuperado como"ninguno".
- Esto ocultará el "Elemento "después de 5 segundos del modelo de objeto de documento (DOM).
Producción
Como se observó en la salida anterior, el incluido ""El elemento se esconde después"5" segundos.
Enfoque 2: Ocultar un elemento después de unos segundos en JavaScript usando el método setTimeOut () con la propiedad de visibilidad
El "visibilidad"La propiedad establece la visibilidad de un elemento. Esta propiedad se puede aplicar combinada con el "setTimeout ()Método para ocultar el elemento recuperado después de la hora establecida.
Sintaxis
Objeto.estilo.visibilidad = 'oculto'En esta sintaxis:
- La visibilidad del especificado "Objeto"Se asigna como"oculto".
Ejemplo
Pasemos por el ejemplo declarado a continuación:
| IDENTIFICACIÓN | Nombre | Edad |
|---|---|---|
| 1 | David | 18 |
Realice los siguientes pasos, como se indica en las líneas de código anteriores:
- Incluir la "
"Elemento tiene los atributos"borde" y "identificación".
- Además, contiene los valores establecidos en la tabla dentro del "
"," ", y " "Etiquetas. - En el código JavaScript, de manera similar, aplique el "setTimeout ()"Método con un tiempo establecido de"3" segundos.
- Después de eso, invoca el "getElementById ()"Método para obtener el elemento incluido, como se discutió.
- Por último, aplique el "visibilidad"Propiedad y asignarla como"oculto". Esto ocultará el elemento asociado después de 3 segundos.
Producción
En la salida anterior, es evidente que el "mesaEl elemento se esconde después de la hora establecida.
Enfoque 3: Ocultar un elemento después de unos segundos en JavaScript utilizando métodos jQuery
El "jQueryEl método se puede aplicar para ocultar el elemento correspondiente obteniéndolo directamente y desvaneciéndolo después del tiempo agregado.
Ejemplo
Vamos a ver el siguiente ejemplo:
Este es el sitio web de Linuxhint
En el fragmento de código anterior:
- Incluir la "jQuery"Biblioteca para utilizar sus métodos.
- Incluir la ""Elemento tiene el declarado"identificación".
- En el código JS, acceda al elemento incluido directamente usando su ID.
- Después de eso, aplique el "espectáculo()Método "que mostrará el elemento recuperado.
- El "demora()" y el "Fadeout ()"Los métodos se aplicarán en combinación para ocultar el elemento asociado después del tiempo de retraso establecido (" "5" segundos).
Producción
La salida anterior significa que el texto agregado se oculta después de cinco segundos.
Conclusión
El "setTimeout ()"Método con el"mostrar"Propiedad, la"setTimeout ()"Método con el"visibilidad"Propiedad, o la"jQueryLos métodos se pueden usar para ocultar un elemento después de unos segundos en JavaScript. El método setTimeOut () combinado con la propiedad de visualización o visibilidad puede ocultar el elemento recuperado después de la hora establecida. Mientras que los métodos jQuery pueden obtener el elemento directamente, mostrarlo y luego esconderlo desvaneciéndolo. Este artículo explicó cómo ocultar un elemento después de unos segundos usando JavaScript.
- Además, contiene los valores establecidos en la tabla dentro del "