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

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

In questa sintassi:

• La visibilità del specificato "Oggetto"È assegnato come"nascosto".

Esempio

Passiamo attraverso l'esempio di seguito:

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 » c affilato Cos'è la matematica.Metodo massimo in C# La matematica.Il metodo max () in C# può trovare il valore massimo di due valori specificati. Ci vog... Dante Palumbo c affilato Cosa significa l'operatore più equals in C#? L'operatore di aggiunta o più equal (+=) in C# viene utilizzato per incrementare il valore di una va... Domiziano Conte C ++ Come utilizzare le funzioni inline in C ++ La funzione in linea si riferisce a mettere il codice di una funzione nel luogo in cui viene effettu... Nestore Caruso Oracle Database Oracle Fusion considerato migliore di SAP? Sig. Valdo Marchetti PHP Come utilizzare la funzione di serializzazione PHP Artemide Ricci PHP Come usare espressioni regolari in PHP Dante Palumbo Giava Quali sono espressioni, dichiarazioni e blocchi in Java Sarita Negri JavaScript Cosa fa W Metacharacter in Regexp di JavaScript Sig. Valdo Marchetti Fedora Come abilitare il repository di fusion RPM su Fedora Domiziano Conte Oracle Database Come memorizzare nella cache la sequenza Oracle per migliorare le risorse del dizionario dei dati? Sig. Valdo Marchetti PHP Come utilizzare la funzione Php Rand Nunzia Martini c affilato Come usare la matematica.Funzione rotonda in c# Nick Marini PHP Come utilizzare la funzione Scandir in PHP Dr. Folco Leone