In diesem Beitrag wird die praktische Implementierung der fadeOut()-Methode von jQuery zur Erzeugung eines sanften Fade-Out-Effekts erläutert.
Wie erstelle ich sanfte Fade-Out-Effekte mit der fadeOut()-Methode von jQuery?
jQuerys „ ausblenden() Die Methode „blendet das ausgewählte Element schrittweise aus, indem es seine Deckkraft verringert. Diese Methode ändert den Status des ausgewählten Elements von sichtbar in ausgeblendet. Das ausgeblendete Element wird auf der Webseite erst angezeigt, wenn der Benutzer es erneut mit dem Befehl „ einblenden() ' Methode.
Syntax
$ ( Wähler ) . ausblenden ( Geschwindigkeit, Lockerung, Rückruf ) ;
Die obige Syntax unterstützt die folgenden optionalen Parameter zum Anpassen des Ausblendeffekts:
- Geschwindigkeit: Es gibt die Geschwindigkeit des Fading-Effekts in Millisekunden an. Standardmäßig ist der Wert „400 ms“. Darüber hinaus unterstützt es auch zwei integrierte Werte „langsam“ und „schnell“.
- Lockerung: Es zeigt die abnehmende Animationsgeschwindigkeit an verschiedenen Punkten. Standardmäßig ist der Wert „Swing (langsamer am Anfang/Ende und langsamer in der Mitte)“. Darüber hinaus funktioniert es auch mit der Funktion „Linear (konstante Geschwindigkeit bei Fading-Animation)“.
- Ruf zurück: Es definiert eine benutzerdefinierte Funktion, die nach Abschluss der Fading-Animation ausgeführt wird, um die definierte Aufgabe auszuführen.
Lassen Sie uns die oben definierte Methode praktisch anwenden.
HTML Quelltext
Bevor Sie mit der Methode „fadeOut()“ fortfahren, sehen Sie sich den folgenden HTML-Code an, der ein Beispielelement „div“ erstellt, für das der Ausblendeffekt ausgeführt wird:
< Taste > ausblenden ( Verstecken Element ) Taste >< br >< br >< Div-ID = „myDiv“ Stil = „Höhe: 80 Pixel; Breite: 300 Pixel; Rand: 2 Pixel durchgehend schwarz; Rand: automatisch; Textausrichtung: Mitte“ >
< h2 > Willkommen bei Linuxhint h2 >
div >
In den obigen Codezeilen:
- Der '
„Tag fügt ein Schaltflächenelement hinzu. - Der ' Das Tag „erstellt ein div-Element mit der ID „myDiv“ und wird mithilfe der folgenden Stileigenschaften (Höhe, Breite, Rahmen, Rand, Textausrichtung) gestaltet.
- Innerhalb des div ist das „ „Tag gibt das erste Unterüberschriftenelement der Ebene 2 an.
Beginnen Sie nun mit dem ersten Beispiel.
Beispiel 1: Erstellen Sie sanfte Fade-Out-Effekte mit dem Standardwert fadeOut()
Im ersten Beispiel wird das übereinstimmende div-Element ausgeblendet, indem die Methode „fadeOut()“ mit dem Standardwert „400 ms“ verwendet wird:
< Skript >
$ ( dokumentieren ) . bereit ( Funktion ( ) {
$ ( 'Taste' ) . klicken ( Funktion ( ) {
$ ( „#myDiv“ ) . ausblenden ( ) ;
} ) ;
} ) ;
Skript >In den obigen Codezeilen:
- Erstens, die „ bereit() Die Methode führt die angegebenen Funktionen aus, wenn das aktuelle HTML-Dokument/DOM geladen wird.
- Als nächstes wird das „ klicken() Die Methode führt die verknüpfte Funktion beim Klicken auf die Schaltfläche aus, wenn auf den zugehörigen „Schaltflächen“-Selektor geklickt wird.
- Danach wird das „ ausblenden() Die Methode verbirgt das aufgerufene div-Element, dessen ID „myDiv“ ist, in 400 ms, d. h. dem Standardwert.
Ausgabe
Es wird beobachtet, dass der gegebene Tastenklick das div-Element schrittweise in „400 ms“ ausblendet.
Beispiel 2: Erstellen Sie sanfte Fade-Out-Effekte mit dem fadeOut()-Parameter „speed“.
In diesem Beispiel wird die Methode „fadeOut()“ mit den integrierten Werten (langsam/schnell) des Parameters „speed“ verwendet:
< Skript >
$ ( dokumentieren ) . bereit ( Funktion ( ) {
$ ( 'Taste' ) . klicken ( Funktion ( ) {
$ ( „#myDiv“ ) . ausblenden ( 'langsam' ) ;
} ) ;
} ) ;
Skript >Jetzt die ' ausblenden() ”-Methode übergibt die „ langsam ”-Wert als Parameter, um den Ausblendeffekt sanft zu erzeugen, d. h. den Status des ausgewählten div-Elements von sichtbar in ausgeblendet zu ändern.
Ausgabe
Es ist ersichtlich, dass das ausgewählte div-Element beim Klicken auf die Schaltfläche langsam ausgeblendet wird.
Beispiel 3: Erstellen Sie sanfte Fade-Out-Effekte mit dem fadeOut()-Parameter „duration“.
In diesem Beispiel wird die Methode „fadeOut()“ mit einer bestimmten Anzahl von Millisekunden als Dauerparameter angewendet:
< Skript >
$ ( dokumentieren ) . bereit ( Funktion ( ) {
$ ( 'Taste' ) . klicken ( Funktion ( ) {
$ ( „#myDiv“ ) . ausblenden ( 6000 ) ;
} ) ;
} ) ;
Skript >Jetzt verwendet die Methode „fadeOut()“ die angegebene Anzahl von Millisekunden, um das übereinstimmende Element in der angegebenen Zeitdauer auszublenden.
Ausgabe
Die obige Ausgabe verbirgt die angegebenen div-Elementänderungen bei einem Klick auf eine Schaltfläche in einem bestimmten Zeitintervall.
Beispiel 4: Erstellen Sie sanfte Fade-Out-Effekte mit der „callback“-Funktion fadeOut()
In diesem Beispiel wird nach Abschluss des Ausblendeffekts über die Methode „fadeOut()“ eine Callback-Funktion ausgeführt:
< Skript >
$ ( dokumentieren ) . bereit ( Funktion ( ) {
$ ( 'Taste' ) . klicken ( Funktion ( ) {
$ ( „#myDiv“ ) . ausblenden ( 4000 , Funktion ( ) {
Konsole. Protokoll ( „Das gegebene div-Element wurde erfolgreich ausgeblendet!“ )
} ) ;
} ) ;
} ) ;
Skript >Im angegebenen Codeblock:
- Der ' ausblenden() Die Methode blendet das übereinstimmende div-Element in einer bestimmten Anzahl von Millisekunden aus und führt dann die bereitgestellte „Callback“-Funktion aus.
- Innerhalb der „ Ruf zurück ”-Funktion, die „ console.log() Die Methode wird angewendet, um die angegebene Anweisung nach Abschluss des „Ausblendeffekts“ anzuzeigen.
Ausgabe
Es ist ersichtlich, dass die „Konsole“ eine in der Callback-Funktion definierte Anweisung anzeigt, nachdem das angegebene div-Element ausgeblendet wurde.
Beispiel 5: Erstellen Sie sanfte Fade-Out-Effekte mit dem „easing“-Parameter von fadeOut()
In diesem Beispiel wird die Methode „fadeOut()“ mit den möglichen Werten des Parameters „easing“ angewendet:
< Skript >
$ ( dokumentieren ) . bereit ( Funktion ( ) {
$ ( 'Taste' ) . klicken ( Funktion ( ) {
$ ( „#myDiv“ ) . ausblenden ( 4000 , 'linear' ) ;
} ) ;
} ) ;
Skript >Jetzt die ' ausblenden() Die Methode führt den Ausblendeffekt in einer bestimmten Anzahl von Millisekunden mit konstanter Geschwindigkeit durch, da „ linear ' Wert.
Ausgabe
Die Ausgabe ändert den gegebenen Elementstatus mit konstanter Geschwindigkeit von sichtbar in ausgeblendet. Damit ist es soweit, den „Fade-Out“-Effekt auf das Element zu implementieren.
Abschluss
So erzeugen Sie einen sanften Ausblendeffekt mit jQuerys „ ausblenden() ”-Methode benötigt der Benutzer keine zusätzlichen Parameter. Bei dieser Methode wird das Element ausgeblendet, d. h. es wird nach und nach ausgeblendet, indem seine Deckkraft geändert wird. Wenn der Benutzer innerhalb einer bestimmten Anzahl von Millisekunden einen Ausblendeffekt ausführen muss, führen Sie eine Rückruffunktion aus und verwenden Sie dann die Parameter „Geschwindigkeit“, „Easing“ und „Rückruf“ mit der Methode „fadeOut()“. In diesem Beitrag wurde die fadeOut()-Methode von jQuery zur Erzeugung eines sanften Ausblendeffekts praktisch erklärt.