Nascondi un elemento dopo alcuni secondi usando JavaScript
Durante la progettazione di una pagina Web reattiva, può esserci un requisito per nascondere alcune funzionalità aggiunte dopo un certo tempo per creare effetti. Ad esempio, avvisare un utente tramite il messaggio pop-up per un tempo limitato fa miracoli ad attirare l'attenzione dell'utente, astenendosi così dall'essere offeso. In tali scenari, nascondere un elemento dopo pochi secondi usando JavaScript aiuta a fare una pagina Web o il sito.
Questo tutorial spiegherà il concetto di nascondere un elemento dopo alcuni secondi usando JavaScript.
Come nascondere un elemento dopo alcuni secondi in JavaScript?
I seguenti approcci possono essere utilizzati per nascondere un elemento dopo alcuni secondi usando JavaScript:
- "setTimeout ()Metodo "con il"Schermo" proprietà.
- "setTimeout ()Metodo "con il"visibilità" proprietà.
- "jQuery"Metodi.
Discutiamo gli approcci dichiarati uno per uno!
Approccio 1: nascondi un elemento dopo alcuni secondi in javaScript usando il metodo setTimeout () Wcon la proprietà del display
IL "setTimeout ()"Il metodo invoca una funzione dopo il tempo assegnato specificato. Mentre il "Schermo"La proprietà imposta il tipo di visualizzazione dell'elemento specificato. Questi approcci possono essere implementati per allocare un tempo prestabilito all'elemento recuperato in modo che si nasconda dopo il tempo specificato.
Sintassi
SetTimeout (Func, Milli, Par1, Par2)Nella sintassi sopra data:
- "Func"Indica la funzione a cui è necessario accedere.
- "Milli"Corrisponde all'intervallo di tempo in millisecondi da eseguire.
- "par1" E "par2"Indica i parametri aggiuntivi.
Nella sintassi sopra:
- La proprietà del display di "Oggetto"È assegnato come"nessuno".
Esempio
Il seguente esempio illustra il concetto dichiarato:
Applicare i passaggi di seguito, come indicato nel codice sopra:
- In primo luogo, includi un ""Elemento con il"src" E "id"Come i suoi attributi.
- Nel codice JS, applica il "setTimeout ()"Metodo alle righe di codice dichiarate. Il tempo impostato, in questo caso, sarà di 5000 millisecondi = "5"Secondi.
- All'interno del metodo, accedi all'elemento incluso dal suo "id" usando il "getElementById ()" metodo.
- Dopodiché, assegna il "Schermo"Proprietà associata all'elemento recuperato come"nessuno".
- Questo di conseguenza nasconderà il ""Elemento dopo 5 secondi dal modello Object Document (DOM).
Produzione
Come osservato nell'output sopra, incluso ""L'elemento si nasconde dopo"5"Secondi.
Approccio 2: nascondi un elemento dopo alcuni secondi in JavaScript usando il metodo setTimeout () con la proprietà di visibilità
IL "visibilità"La proprietà imposta la visibilità di un elemento. Questa proprietà può essere applicata combinata con "setTimeout ()"Metodo per nascondere l'elemento recuperato dopo il tempo impostato.
Sintassi
Oggetto.stile.visibilità = 'nascosto'In questa sintassi:
- La visibilità del specificato "Oggetto"È assegnato come"nascosto".
Esempio
Passiamo attraverso l'esempio di seguito:
| ID | Nome | Età |
|---|---|---|
| 1 | David | 18 |
Eseguire i seguenti passaggi, come indicato nelle righe di codice sopra:
- Includere il "
"Elemento con gli attributi"confine" E "id".
- Inoltre, contenere i valori indicati nella tabella all'interno del "
"," ", E " "Tag. - Nel codice JavaScript, allo stesso modo, applica il "setTimeout ()"Metodo con un tempo impostato di"3"Secondi.
- Dopodiché, invoca il "getElementById ()"Metodo per recuperare l'elemento incluso, come discusso.
- Infine, applica il “visibilità"Proprietà e allocarla come"nascosto". Questo nasconderà l'elemento associato dopo 3 secondi.
Produzione
Nell'output sopra, è evidente che il "tavolo"Element si nasconde dopo il tempo impostato.
Approccio 3: nascondi un elemento dopo alcuni secondi in JavaScript usando i metodi jQuery
IL "jQuery"Il metodo può essere applicato per nascondere l'elemento corrispondente recuperandolo direttamente e sbiadandolo dopo il tempo aggiunto.
Esempio
Panoramiamo il seguente esempio:
Questo è il sito web Linuxhint
Nel frammento di codice sopra:
- Includere il "jQuery"Biblioteca per utilizzare i suoi metodi.
- Includere il ""Elemento con il dichiarato"id".
- Nel codice JS, accedi all'elemento incluso utilizzando direttamente il suo ID.
- Dopodiché, applica il "spettacolo()"Metodo, che visualizzerà l'elemento recuperato.
- IL "ritardo()" e il "dissolvenza()"I metodi verranno applicati in combinazione per nascondere l'elemento associato dopo il tempo di ritardo impostato ("5"Secondi).
Produzione
L'output sopra indica che il testo aggiunto viene nascosto dopo cinque secondi.
Conclusione
IL "setTimeout ()Metodo "con il"Schermo"Proprietà, la"setTimeout ()Metodo "con il"visibilità"Proprietà o"jQuery"I metodi possono essere usati per nascondere un elemento dopo alcuni secondi in JavaScript. Il metodo setTimeout () combinato con la proprietà di visualizzazione o visibilità può nascondere l'elemento recuperato dopo il tempo impostato. Mentre i metodi jQuery possono recuperare direttamente l'elemento, visualizzarlo e quindi nasconderlo sbiadendolo. Questo articolo ha spiegato come nascondere un elemento dopo alcuni secondi usando JavaScript.
- « Ottieni Element per ID corrispondente alla stringa parzialmente usando JavaScript
- Python Tarfile »
- Inoltre, contenere i valori indicati nella tabella all'interno del "