JQuery -Fading -Methoden erklärten

Ausblenden ist die Eigenschaft, die es ermöglicht, die Opazität (Transparenz) von HTML -Elementen zu manipulieren. JQuery bietet vier Verblassungsmethoden, mit denen Sie die Transparenz von Elementen ändern können. Diese Methoden umfassen, fadein (), fadeout (), fadetoggle () und fadeto ().

Dieser Artikel untersucht die verblassenden Methoden in JQuery und dient den folgenden Lernergebnissen.

• Arbeiten von Jquery -Verblassungsmethoden
• Verwenden von Jquery Fading -Methoden

So verwenden Sie JQuery Fading -Methoden

Wie bereits erwähnt, verfügt JQuery hier über vier verblassende Methoden und hier wird ein tiefes Einblick in alle diese Methoden bereitgestellt.

So verwenden Sie die Fadein () -Methode

Die Fadein () -Methode zeigt das Element an, indem die Deckkraft erhöht wird. Die Syntax dieser Methode ist unten bereitgestellt:

$ (Selektor).Fadein (Geschwindigkeit, Rückruf);

Die Syntax hat die folgenden Instanzen

• Wähler kann ein beliebiges Element sein oder sich auf die Klasse oder ID eines beliebigen Elements beziehen.
• Geschwindigkeit kann in einem der vier Werte angegeben werden: langsam, mittel, schnell und Millisekunden.
• Ruf zurück ist der optionale Parameter und wird ausgeübt, nachdem die Funktion erfolgreich ausgeführt wurde.

Beispiel

Der unten angegebene Code zeigt die Verwendung der Jquery Fadeout () -Methode.

JQuery

$ (Dokument).Ready (function ()
$ (".einblenden").klicken (function ()
$ (".langsam").Fadein ("langsam");
$ (".schnell").Fadein ("Fast");
$ (".mili ").Fadein (2000);
);
);

Der Code wird als beschrieben als,

• .einblenden Bezieht sich auf die Schaltflächenklasse und wird beim Klicken auf die Schaltfläche verblassen
• Die .langsam, .schnell und .Mili Der Unterricht bezieht sich auf drei Absätze, die mit verschiedenen Geschwindigkeiten verblasst werden

Notiz: Die Anzeigeeigenschaft des Elements (das Sie verblassen) muss auf keine festgelegt werden.

Ausgang

Während wir verblassen und die Anzeigeeigenschaft von Absätzen auf keiner. Somit werden die Absätze beim Ausführen der Seite verborgen sein.

Nach dem Klicken auf die Schaltfläche werden Sie feststellen, dass die Absätze abhängig von der Geschwindigkeit angezeigt werden, wie im Bild unten gezeigt.

So verwenden Sie die Fadeout () -Methode

Die Fadeout () -Methode verblasst das angezeigte Element durch Verringern der Deckkraft des Elements. Die Syntax dieser Methode ist unten bereitgestellt:

$ (Selektor).Fadeout (Geschwindigkeit, Rückruf);

Beispiel

Der unten geschriebene Code zeigt die Verwendung von Jquery Fadeout () -Methode.

Der obige Code wird als beschrieben als,

• .ausblenden Die Klasse von Knopf wird verwendet, wodurch die Absätze ausgeblendet werden
• Die .langsam, .schnell und .Mili Sind die Klassennamen für Absätze festgelegt und werden verwendet, um zu verblassen sowie zum Styling

Ausgang

In der Fadeout () -Methode werden die Absätze wie unten gezeigt angezeigt.

Nach dem Klicken auf die Schaltfläche verblassen die Absätze aus.

So verwenden Sie die Fadeto () -Methode

Die Fadeto () -Methode funktioniert nach den Prinzipien der Fadeout () -Methode. Fadeto () verblasst das Element jedoch unter Verwendung eines numerischen Bereichs (0-1). Dieser Opazitätsbereich definiert die Deckkraftniveau des Elements, desto höher ist die Zahl der Opazität und umgekehrt. Die Syntax ist unten bereitgestellt:

$ (Selektor).Fadeto (Geschwindigkeit, Deckkraft, Rückruf);

Der Parameter der Opazität akzeptiert 0 bis 1 Wert.

Beispiel

Der nachstehende Code übt die Fadeto () -Methode aus.

Der Code wird als beschrieben als,

• .Fadeto bezieht sich auf die Button -Klasse
• Die #min, #avg und #max repräsentiert die IDs von drei Div -Tags, und diese ID beziehen sich auf die Werte, die für die Fadeto () -Methode verwendet werden
• Der verblassende Wert variiert von 0 bis 1 in Fadeto () -Methoden

Ausgang

Vor der Anwendung der Fadeto () -Methode

Nach der Anwendung der Fadeto () -Methode

Aus der obigen Ausgabe wird beobachtet, dass der Absatz mit Wert 0 ausgewaschen wurde.

So verwenden Sie die Fadetoggle () -Methode

Die Fadetoggle () -Methode liegt zwischen Fadein () und Fadeout () -Methoden. Durch die Verwendung von Fadetoggle () können Sie ein verstecktes Element anzeigen und ein angezeigtes Element ausblenden. Die Syntax dieser Methode lautet:

$ (Selektor).Fadeto (Geschwindigkeit, Rückruf);

Beispiel

Der nachstehend angegebene Code Funktionen zur Verwendung der Fadetoggle () -Methode.

• .Fadetoggle Klasse bezieht sich auf den Knopf
• Die #langsam, #fast und #mili repräsentiert verschiedene IDs von Div

Ausgang

Bevor Sie auf die Schaltfläche klicken

Nach dem Klicken auf die Schaltfläche,

Es wird der Schluss gezogen, dass das Element nach der Fadetoggle () -Methode (als Fadeout () -Methode) versteckt wird (wie Fadeout ()), wird versteckt). In ähnlicher Weise fungiert der Fadetoggle () als Fadein () -Methode, wenn sich das Element in Fadeout () -Zustand befindet.

Abschluss

JQuery bietet verschiedene Fading -Methoden, darunter Fadein (), Fadeout (), Fadetoggle () und Fadeto (), die beim Verblassen von HTML -Elementen helfen. Dieser Leitfaden bietet die Arbeit und Verwendung jeder JQuery -Verblassungsmethode. Die Fadein () -Methode zeigt das Element an, wenn es versteckt ist, während der Fadeout () das Element verbirgt. Die Fadeto () -Methode verblasst oder aus der Opazitätsnummer ein- oder aus-. Schließlich funktioniert die Methode fadetoggle () zwischen fadein () und fadeout () Methoden.