jQuery-Effekte - Verblassen
Mit jQuery können Sie Elemente ein- und ausblenden.
Klicken Sie hier, um das Bedienfeld ein-/auszublenden
Da Zeit kostbar ist, liefern wir schnelles und einfaches Lernen.
Bei W3Schools können Sie alles lernen, was Sie zum Lernen brauchen, in einem zugänglichen und handlichen Format.
Beispiele
Demonstriert die Methode jQuery fadeIn().
Demonstriert die Methode jQuery fadeOut().
Demonstriert die Methode jQuery fadeToggle().
Demonstriert die Methode jQuery fadeTo().
jQuery-Fading-Methoden
Mit jQuery können Sie ein Element ein- und ausblenden.
jQuery hat die folgenden Fade-Methoden:
fadeIn()fadeOut()fadeToggle()fadeTo()
jQuery fadeIn() Methode
Die jQuery- fadeIn()Methode wird verwendet, um ein verstecktes Element einzublenden.
Syntax:
$(selector).fadeIn(speed,callback);
Der optionale Geschwindigkeitsparameter gibt die Dauer des Effekts an. Es kann die folgenden Werte annehmen: "langsam", "schnell" oder Millisekunden.
Der optionale Callback-Parameter ist eine Funktion, die ausgeführt werden soll, nachdem das Fading abgeschlossen ist.
Das folgende Beispiel demonstriert die fadeIn()Methode mit verschiedenen Parametern:
Beispiel
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut() Methode
Die jQuery- fadeOut()Methode wird verwendet, um ein sichtbares Element auszublenden.
Syntax:
$(selector).fadeOut(speed,callback);
Der optionale Geschwindigkeitsparameter gibt die Dauer des Effekts an. Es kann die folgenden Werte annehmen: "langsam", "schnell" oder Millisekunden.
Der optionale Callback-Parameter ist eine Funktion, die ausgeführt werden soll, nachdem das Fading abgeschlossen ist.
Das folgende Beispiel demonstriert die fadeOut()Methode mit verschiedenen Parametern:
Beispiel
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() Methode
Die jQuery fadeToggle()-Methode schaltet zwischen den
Methoden fadeIn()und um.fadeOut()
Wenn die Elemente ausgeblendet sind, fadeToggle()blendet sie ein.
Wenn die Elemente eingeblendet sind, fadeToggle()blendet sie aus.
Syntax:
$(selector).fadeToggle(speed,callback);
Der optionale Geschwindigkeitsparameter gibt die Dauer des Effekts an. Es kann die folgenden Werte annehmen: "langsam", "schnell" oder Millisekunden.
Der optionale Callback-Parameter ist eine Funktion, die ausgeführt werden soll, nachdem das Fading abgeschlossen ist.
Das folgende Beispiel demonstriert die fadeToggle()Methode mit verschiedenen Parametern:
Beispiel
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() Methode
Die jQuery- fadeTo()Methode ermöglicht das Überblenden auf eine bestimmte Deckkraft (Wert zwischen 0 und 1).
Syntax:
$(selector).fadeTo(speed,opacity,callback);
Der erforderliche Geschwindigkeitsparameter gibt die Dauer des Effekts an. Es kann die folgenden Werte annehmen: "langsam", "schnell" oder Millisekunden.
Der erforderliche Opazitätsparameter in der fadeTo()Methode gibt das Ausblenden auf eine bestimmte Deckkraft (Wert zwischen 0 und 1) an.
Der optionale Callback-Parameter ist eine Funktion, die nach Abschluss der Funktion ausgeführt werden soll.
Das folgende Beispiel demonstriert die fadeTo()Methode mit verschiedenen Parametern:
Beispiel
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
jQuery-Übungen
Referenz zu jQuery-Effekten
Eine vollständige Übersicht aller jQuery-Effekte finden Sie in unserer jQuery-Effekt-Referenz .