Dieser Beitrag beleuchtet die wichtigsten Unterschiede zwischen hide() und fadeOut(), show() und fadeIn() in jQuery.
Bevor wir zum Unterschied zwischen hide() und fadeOut(), show() und fadeIn() in jQuery übergehen, werfen wir zunächst einen Blick auf die Grundlagen dieser Methoden, indem wir die folgenden Anleitungen lesen:
- jQuerys fadeIn()-Methode
- jQuerys fadeOut()-Methode
- JavaScript JQuery Hide()-Methode | Erklärt
- JQuery Show()-Methode | Erklärt
Sehen Sie sich zunächst den Unterschied zwischen den Methoden hide() und fadeOut() in jQuery an.
Unterscheiden Sie zwischen hide() und fadeOut() in jQuery
Der einzige Hauptunterschied zwischen dem „ verstecken() ' Und ' ausblenden() „Methode ist:
- Zeitintervall : Der ' verstecken() Die „Methode“ verbirgt das Element standardmäßig, indem sie ihre Deckkraft sofort von 100 auf 0 ändert, ohne ein Zeitintervall zu verbrauchen, während die „ ausblenden() Die Methode wird ausgeblendet, d. h. das Element wird nach und nach in „400 ms“ ausgeblendet, was dem Standardwert entspricht.
Sehen wir uns die praktische Umsetzung des genannten Unterschieds an.
Schauen Sie sich zunächst den folgenden HTML-Code an:
< Center >< h2-ID = „H2“ > Willkommen bei Linuxhint ! h2 >
< Taste > Element ausblenden Taste >
Center >
In den obigen Codezeilen:
- Der '
Das Tag „passt die Ausrichtung der angegebenen Elemente in der Mitte der Webseite an. - Der ' „Tag erstellt eine Unterüberschrift der Ebene 2 mit der ID „H2“.
- Der '
„Tag fügt eine neue Schaltfläche ein.
Notiz: In diesem Handbuch wird der obige HTML-Code befolgt.
Beispiel: Anwenden der jQuery-Methode „hide()“ mit dem Wert „Default“.
In diesem Beispiel wird „hide()“ mit seinen Standardwerten angewendet, um ein Element auszublenden:
< Skript >$ ( dokumentieren ) . bereit ( Funktion ( ) {
$ ( 'Taste' ) . klicken ( Funktion ( ) {
$ ( „#H2“ ) . verstecken ( ) ;
} ) ;
} ) ;
Skript >
In den obigen Codezeilen:
- Erstens, die „ bereit() Die Methode wird angewendet, um die angegebenen Funktionen auszuführen, wenn das aktuelle HTML-Dokument geladen wird.
- Als nächstes wird das „ klicken() Die Methode ist dafür verantwortlich, die verknüpfte Funktion beim Klicken auf die Schaltfläche auszuführen.
- Danach wird das „ verstecken() Die Methode „versteckt“ sofort das aufgerufene Überschriftenelement, dessen ID „H2“ ist.
Ausgabe
Es ist zu erkennen, dass das Überschriftenelement beim Klicken auf die Schaltfläche sofort ausgeblendet wird.
Beispiel: Anwenden der jQuery-Methode „fadeOut()“ mit dem Wert „Default“.
In diesem Beispiel wird die Methode „fadeOut()“ mit ihren Standardwerten verwendet, um das angegebene Element in „400 ms“ schrittweise auszublenden.
In diesem Szenario wird der Inhalt des „Button“-Elements geändert:
< Taste > ausblenden ( Verstecken Element ) Taste >Implementieren Sie nun die Methode „fadeOut()“ auf diese Weise:
< Skript >$ ( dokumentieren ) . bereit ( Funktion ( ) {
$ ( 'Taste' ) . klicken ( Funktion ( ) {
$ ( „#H2“ ) . ausblenden ( ) ;
} ) ;
} ) ;
Skript >
Zu diesem Zeitpunkt ist die „ ausblenden() ”-Methode wird angewendet, um das aufgerufene Überschriftenelement mit 400 ms, d. h. dem Standardwert, auszublenden.
Ausgabe
Die Ausgabe zeigt deutlich, dass der angegebene Schaltflächenklick das Überschriftenelement im Standardzeitintervall, d. h. „400 ms“, allmählich verbirgt.
Unterscheiden Sie zwischen show() und fadeIn() in jQuery
Ähnlich wie bei den Methoden „hide()“ und „fadeOut()“ besteht der gleiche Unterschied zwischen den Methoden „show()“ und „fadeIn()“:
- Zeitintervall : Der ' zeigen() Die Methode „zeigt standardmäßig das ausgeblendete Element an, indem sie ihre Deckkraft sofort von 0 auf 100 ändert, während die Methode „ einblenden() Die Methode zeigt das ausgeblendete Element schrittweise in „400 ms“ an, was dem Standardwert entspricht.
Beispiel: Anwenden der jQuery-Methode „show()“ mit dem Wert „Standard“.
In diesem Beispiel wird „show()“ mit seinen Standardwerten angewendet, um das ausgeblendete Element anzuzeigen.
Schauen Sie sich zunächst den bereitgestellten HTML-Codeblock an:
< Center >< Taste > Element anzeigen Taste >
< h2-ID = „H2“ Stil = „Anzeige:keine“ > Willkommen bei Linuxhint ! h2 >
Center >
Gemäß diesem Szenario wird das angegebene Überschriftenelement mit Hilfe des „ Anzeige: keine ' Eigentum.
Befolgen Sie nun den angegebenen Codeblock, um die praktische Implementierung der Methode „show()“ zu verstehen:
< Skript >$ ( dokumentieren ) . bereit ( Funktion ( ) {
$ ( 'Taste' ) . klicken ( Funktion ( ) {
$ ( „#H2“ ) . zeigen ( ) ;
} ) ;
} ) ;
Skript >
Der obige Codeblock verwendet das „ zeigen() ”-Methode, um das hinzugefügte ausgeblendete Element sofort anzuzeigen.
Ausgabe
Es ist ersichtlich, dass beim Klicken auf die Schaltfläche das ausgeblendete Überschriftenelement sofort angezeigt wird.
Beispiel: Anwenden der jQuery-Methode „fadeIn()“ mit dem Wert „Default“.
Dieses Beispiel zeigt das ausgeblendete Element mit der Methode „fadeIn()“ mit dem Standardwert „ 400ms ”:
Der Text des Schaltflächenelements wird entsprechend dem gegebenen Szenario geändert:
< Taste > einblenden ( Zeigen Element ) Taste >Wenden Sie nun das „ einblenden() ”-Methode mit dem folgenden Codeblock:
< Skript >$ ( dokumentieren ) . bereit ( Funktion ( ) {
$ ( 'Taste' ) . klicken ( Funktion ( ) {
$ ( „#H2“ ) . einblenden ( ) ;
} ) ;
} ) ;
Skript >
In diesem Codeblock ist das „ einblenden() Die Methode wird verwendet, um das versteckte Element, das mit der ID „H2“ übereinstimmt, in 400 ms anzuzeigen, d. h. dem Standardwert.
Ausgabe
Es ist zu beobachten, dass der gegebene Tastenklick das ausgeblendete Element schrittweise im Standardzeitintervall, d. h. „400 ms“, anzeigt.
Abschluss
In jQuery ist der einzige wesentliche Unterschied zwischen verstecken() Und ausblenden() , zeigen() , Und einblenden() Methode ist „ Zeitintervall “. Die Methoden „show()“ und „hide()“ führen ihre Funktionen standardmäßig sofort aus, während die Methoden „fadeIn()“ und „fadeOut()“ ihre Aufgaben im Standardzeitintervall, d. h. „400 ms“, ausführen. In diesem Beitrag wurden die wichtigsten Unterschiede zwischen hide() und fadeOut(), show() und fadeIn() in jQuery praktisch erklärt.