Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die Funktion „Verschwinden“ nach zwei Sekunden in jquery

So implementieren Sie die Funktion „Verschwinden“ nach zwei Sekunden in jquery

PHPz
PHPzOriginal
2023-04-07 09:02:47755Durchsuche

Wie wir alle wissen, ist Zeit ein sehr wichtiges Element im Webdesign. Manchmal müssen wir einige Eingabeaufforderungsinformationen auf der Webseite anzeigen, z. B. Erfolgsaufforderungen, Fehlermeldungen usw., aber diese Informationen müssen nicht die ganze Zeit auf der Seite bleiben, sondern müssen nur vor den Augen des Benutzers blinken Augen.

Also haben wir darüber nachgedacht, wie wir eine solche Aufforderungsnachricht auf der Seite implementieren können? Heute werfen wir einen Blick auf die „fadeOut“-Methode von jquery. Durch die Verwendung ihres einfachen Codes können wir diesen Effekt leicht erzielen.

Lassen Sie uns zunächst einen kurzen Blick auf jquery werfen. Es handelt sich um eine schnelle, kleine, leistungsstarke und schön gestaltete JavaScript-Bibliothek, die ursprünglich im Januar 2006 von John Resig veröffentlicht wurde. Ende der Entwicklung von Web-Websites. Es ermöglicht Benutzern eine komfortablere Bedienung von HTML-Dokumenten, die Handhabung von Ereignissen, die Erstellung von Animationseffekten, die Implementierung von Ajax-Programmen und vieles mehr.

Die Methode „fadeOut“ ist eine in jquery bereitgestellte Methode, um das Ausblenden von Elementen durch Festlegen eines Zeitintervalls zu realisieren. Schauen wir uns die detaillierte Verwendung an.

Zuerst müssen wir auf die Jquery-Bibliothek verweisen, die auf folgende Weise eingeführt werden kann:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Dann müssen wir der Seite ein div-Element als Container für unser Eingabeaufforderungsfeld hinzufügen. Der Code lautet wie folgt:

<div id="tip">这是一个提示信息!</div>

Als nächstes können wir JavaScript hinzufügen. Schreiben Sie den folgenden Code ein:

$(document).ready(function(){
  // 2秒后元素消失
  $("#tip").fadeOut(2000);
});

Lassen Sie uns den obigen Code Schritt für Schritt erklären:

Zuerst verwenden wir die Funktion „$(document).ready()“, um sicherzustellen, dass der HTML-Code Das Dokument der Seite wurde geladen, und dann können wir die Elemente laden und Operationen ausführen.

Verwenden Sie den Selektor „$(“#tip“)“, um das gerade hinzugefügte div-Element abzurufen, und verwenden Sie die Methode „fadeOut()“, um es ein- und auszublenden, wobei 2000 bedeutet, dass das Element innerhalb von 2 verschwinden soll Sekunden.

Mit der oben genannten Methode können wir ganz bequem den Effekt erzielen, dass auf der Seite nur 2 Sekunden lang ein Eingabeaufforderungsfeld angezeigt wird.

Darüber hinaus können wir auch die Methode „fadeIn()“ verwenden, um Elemente auszublenden. Ich glaube, dass Ihre Leser sehr interessiert sein werden! Schauen Sie sich abschließend den vollständigen Code unten an, um den Charme der „fadeOut“-Methode zu spüren:




  
  jquery两秒后消失
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  


  <div id="tip">这是一个提示信息!</div>

Kurz gesagt, jquery bietet als hervorragende JavaScript-Bibliothek viel Komfort für die Web-Frontend-Entwicklung. Durch die Verwendung der Methode „fadeOut“ ist die Anwendung sehr einfach und benutzerfreundlich. Ich hoffe, dass die oben genannten Inhalte für das Lernen aller hilfreich sein werden. Gleichzeitig hoffe ich, dass jeder weiterhin auf verwandte Front-End-Entwicklungstechnologien achten und seine Fähigkeiten kontinuierlich verbessern kann.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion „Verschwinden“ nach zwei Sekunden in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn