jQuery Effekte - Einblenden und Ausblenden

jQuery bietet eine einfache Oberfläche, um eine Vielzahl erstaunlicher Effekte auszuführen.

Die jQuery-Effektmethoden ermöglichen es uns, mit minimalem Konfigurationsaufwand häufig verwendete Effekte anzuwenden.

jQuery-Einblenden- und Ausblendenmethoden

Mit jQuery können wir Einblenden- und Ausblenden-Effekte umsetzen.

Wir haben die folgenden jQuery-Einblenden- und Ausblendenmethoden:

• fadeIn()

• fadeOut()

• fadeToggle()

• fadeTo()

Das nächste Kapitel zeigt Ihnen, wie Sie jede Einblenden- und Ausblendenmethode verwenden.

jQuery fadeIn() und fadeOut()

jQuery fadeIn()Die Methode ändert die Opazität des ausgewählten Elements allmählich von unsichtbar auf sichtbar.

jQuery fadeOut()Die Methode ändert die Opazität des ausgewählten Elements allmählich von sichtbar auf unsichtbar.

Der folgende Beispiel zeigt die Verwendung der Methoden fadeIn() und fadeOut().

//　Einführung in sichtbare Absätze ausblenden
$("#fadeout-btn").click(function(){
　　$("p").fadeOut();
});
//　Einführung in versteckte Absätze einblenden
$("#fadein-btn").click(function(){
　　$("p").fadeIn();
});

Dies istfadeIn()Methodensyntax:

$(selector).fadeIn(duration, easing, callback);

Dies istfadeOut()Methodensyntax:

$(selector).fadeOut(duration,　easing,　callback);

unabhängigfadeIn()undfadeOut()Diese Methode akzeptiert drei optionale Parameter:

• duration -Bestätigen Sie, dass der Ein- und AusblendeffektDauerDauer. Mögliche Werte: "slow", "fast" oder Millisekunden

• easing -Zeige die Easing-Funktion an, die für den Übergang verwendet wird. Mögliche Werte: "swing", "linear"

• callback-Funktion, die nach Abschluss der Methode fadeIn/fadeOut aufgerufen wird

Dieses Beispiel zeigt die Verwendung von fadeIn() und fadeOut() mitdurationParameter:

$("#fadeout-btn").click(function(){
　　$("p").fadeOut(1500);
});
$("#fadein-btn").click(function(){
　　$("p").fadeIn(1500);
});

Dieses Beispiel zeigt die Verwendung von fadeIn() und fadeOut() mitRückrufParameter:

$("#fadeout-btn").click(function(){
　　$("div").fadeOut(600,　function(){
　　　　$("h3").text("Ausblenden abgeschlossen.");
　　});
});
$("#fadein-btn").click(function(){
　　$("div").fadeIn(600,　function(){
　　　　$("h3").text("Einblenden abgeschlossen.");
　　});
});

Führe eine Animation für alle Spannen (in diesem Fall Wörter) durch, um sie schnell abblenden zu lassen, und200 Millisekunden für jede Animation abgeschlossen:

$("button").click(function(){
　　$("span:last-child").fadeOut("fast",　function(){
　　　　$(this).prev().fadeOut("fast",　arguments.callee);
　　});
});

jQuery fadeToggle() Methode

Wir können auchfadeToggle()Diese Methode wechselt zwischen dem Einblenden und Ausblenden des HTML-Elements.

Wenn das ausgewählte Element ausblendetfadeToggle()dann wird es einblenden.

Wenn das ausgewählte Element einblendetfadeToggle()sie alle allmählich aus.

Der folgende Beispielcode führt<p>Wechsel zwischen dem Einblenden und Ausblenden des Elements

$("button").click(function(){
　　$("p").fadeToggle();
});

Dies istfadeToggle()Methodensyntax:

$(selector).fadeToggle(duration,　easing,　callback);

Beachten Sie:fadeToggle()Diese Methode akzeptiert drei optionale Parameter:

• duration -Bestätigen Sie, dass der Ein- und AusblendeffektDauerDauer. Mögliche Werte: "slow", "fast" oder Millisekunden

• easing -Zeige die Easing-Funktion an, die für den Übergang verwendet wird. Mögliche Werte: "swing", "linear"

• callback-Funktion, die nach Abschluss der Methode fadeIn/fadeOut aufgerufen wird

jQuery fadeTo() Methode

jQuery fadeTo()Diese Methode ändert die Transparenz des ausgewählten Elements schrittweise auf die angegebene Transparenz.

Hinweis:Beachten Sie:fadeTo()Diese Methode ändert die Seitenausrichtung nicht (der ausgewählte Element belegt weiterhin den gleichen Raum wie zuvor).

Dieser Beispielcode verringert<div>Elementtransparenz:

$("button").click(function(){
　　$("div").fadeTo(500,　0.2);
});

Dies istfadeTo()Methodensyntax:

$(selector)fadeTo.(duration,　opacity,　easing,　callback)

Parameter:

• duration -Bestätigen Sie, dass der Ein- und AusblendeffektDauerDauer. Mögliche Werte: "slow", "fast" oder Millisekunden

• opacity-Die Transparenz, die eingefügt werden soll. Muss zwischen 0.00 und1.00 zwischen den Zahlen

• easing -（Optional）Der zu verwendende Akzelerationsfunktion. Mögliche Werte: "swing", "linear"

• callback-（Optional）Die Funktion, die nach Abschluss der Ein- und Ausblendung aufgerufen wird

Das folgende Beispiel zeigt die Verwendung von fadeTo() mitRückrufParameter:

$("button").click(function(){
　　$("div").fadeTo(500,　0,　function(){
　　　　alert("Transparenz verringert!!!");
　　});
});

jQuery Effekt Referenz

Für vollständige Effektinformationen besuchen Sie bitte unserejQuery Effects Referenzhandbuch.