Verstecken Sie ein Element nach einigen Sekunden mit JavaScript
Während des Entwerfens einer reaktionsschnellen Webseite kann nach einem bestimmten Zeitpunkt einige zusätzliche Funktionen ausgeblendet werden, um Effekte zu erstellen. Beispielsweise macht es Wunder, einen Benutzer über die Popup-Nachricht auf eine begrenzte Zeit aufmerksam zu machen. In solchen Szenarien hilft es, ein Element nach einigen Sekunden mit JavaScript zu verbergen, eine Webseite oder die Website hervorzuheben.
Dieses Tutorial erklärt das Konzept, ein Element nach einigen Sekunden mit JavaScript zu verbergen.
So verbergen Sie ein Element nach einigen Sekunden in JavaScript?
Die folgenden Ansätze können verwendet werden, um ein Element nach einigen Sekunden mit JavaScript auszublenden:
- “setTimeout ()Methode mit der “Anzeige" Eigentum.
- “setTimeout ()Methode mit der “Sichtweite" Eigentum.
- “JQuery”Methoden.
Lassen Sie uns die angegebenen Ansätze nacheinander diskutieren!
Ansatz 1: Verstecken Sie ein Element nach einigen Sekunden in JavaScript mithilfe von setTimeout () -Methoden Wmit der Anzeigeeigenschaft
Der "setTimeout ()Die Methode ruft nach der angegebenen zugewiesenen Zeit eine Funktion auf. Während die "AnzeigeDie Eigenschaft legt den Anzeigetyp des angegebenen Elements fest. Diese Ansätze können implementiert werden, um dem abgerufenen Element eine festgelegte Zeit zuzuordnen, damit es sich nach der angegebenen Zeit verbirgt.
Syntax
SetTimeout (Func, Milli, Par1, Par2)In der oben gegebenen Syntax:
- “Func”Zeigt die Funktion an, auf die zugegriffen werden muss.
- “MilliEntspricht dem Zeitintervall in Millisekunden zur Ausführung.
- “par1" Und "par2Zeigen Sie auf die zusätzlichen Parameter.
In der obigen Syntax:
- Die Anzeigeeigenschaft der “Objekt"Wird als" zugewiesen "keiner”.
Beispiel
Das folgende Beispiel zeigt das angegebene Konzept:
Wenden Sie die folgenden Schritte an, wie im obigen Code angegeben:
- Zunächst einfügen eine “”Element mit dem“src" Und "Ausweis”Als Attribute.
- Wenden Sie im JS -Code das ansetTimeout ()Methode zu den angegebenen Codezeilen. Die festgelegte Zeit beträgt in diesem Fall 5000 Millisekunden = “5Sekunden.
- Innerhalb der Methode zugänglich auf das enthaltene Element durch seine “Ausweis" Verwendung der "GetElementById ()" Methode.
- Danach zuweisen Sie die “Anzeige”Eigenschaft, die mit dem abgerufenen Element als" verbunden ist "keiner”.
- Dies wird die „die“ verbergen “Element nach 5 Sekunden aus dem Dokumentobjektmodell (DOM).
Ausgang
Wie in der obigen Ausgabe beobachtet, ist das enthalten “"Element versteckt sich danach"5Sekunden.
Ansatz 2: Verstecken Sie ein Element nach einigen Sekunden in JavaScript mithilfe der SetTimeout () -Methode mit der Sichtbarkeitseigenschaft
Der "SichtweiteDie Eigenschaft legt die Sichtbarkeit eines Elements fest. Diese Eigenschaft kann kombiniert mit dem “angewendet werdensetTimeout ()Methode, um das abgerufene Element nach der festgelegten Zeit zu verbergen.
Syntax
Objekt.Stil.Sichtbarkeit = 'versteckt'In dieser Syntax:
- Die Sichtbarkeit der angegebenen “Objekt"Wird als" zugewiesen "versteckt”.
Beispiel
Lassen Sie uns das untergeordnete Beispiel durchlaufen:
| AUSWEIS | Name | Alter |
|---|---|---|
| 1 | David | 18 |
Führen Sie die folgenden Schritte aus, wie in den obigen Codezeilen angegeben:
- Umfassen die "
"Element mit den Attributen"Grenze" Und "Ausweis”.
- Enthalten auch die angegebenen Werte in der Tabelle innerhalb der “
"," ", Und " " Stichworte. - Wenden Sie im JavaScript -Code in ähnlicher Weise das ansetTimeout ()"Methode mit einer festgelegten Zeit von"3Sekunden.
- Danach rufen Sie die “auf"GetElementById ()Methode zum Abrufen des enthaltenen Elements, wie erläutert.
- Schließlich wenden Sie die “an“Sichtweite"Eigentum und zuordnen es als" zu "versteckt”. Dies wird das zugehörige Element nach 3 Sekunden verbergen.
Ausgang
In der obigen Ausgabe ist es offensichtlich, dass das “TischElement versteckt sich nach der festgelegten Zeit.
Ansatz 3: Verstecken Sie ein Element nach einigen Sekunden in JavaScript mit JQuery -Methoden
Der "JQueryDie Methode kann angewendet werden, um das entsprechende Element zu verbergen, indem es direkt abgerufen und nach der zusätzlichen Zeit verblasst.
Beispiel
Überlegen wir das folgende Beispiel:
Dies ist LinuxHint -Website
Im obigen Code -Snippet:
- Umfassen die "JQueryBibliothek, um ihre Methoden zu nutzen.
- Umfassen die ""Element mit dem angegebenen"Ausweis”.
- Greifen Sie im JS -Code im JS -Code direkt mit der ID auf das enthaltene Element zu.
- Danach anwenden Sie die “zeigen()Methode, mit der das abgerufene Element angezeigt wird.
- Der "Verzögerung()" und das "ausblenden()"Methoden werden in Kombination angewendet, um das zugehörige Element nach der festgelegten Verzögerungszeit zu verbergen ("5”Sekunden).
Ausgang
Die obige Ausgabe bedeutet, dass der hinzugefügte Text nach fünf Sekunden versteckt wird.
Abschluss
Der "setTimeout ()Methode mit der “Anzeige”Eigentum, die“setTimeout ()Methode mit der “Sichtweite”Eigentum oder die“JQueryMethoden können verwendet werden, um ein Element nach einigen Sekunden in JavaScript zu verbergen. Die SetTimeOut () -Methode kombiniert mit der Eigenschaft Anzeige oder Sichtbarkeit kann das abgerufene Element nach der festgelegten Zeit ausblenden. Während die JQuery -Methoden das Element direkt abrufen, es anzeigen und dann verbergen können, indem sie es verblassen. In diesem Artikel wurde erläutert, wie ein Element nach einigen Sekunden mit JavaScript verbergt wird.
- Enthalten auch die angegebenen Werte in der Tabelle innerhalb der “