jQuery Effekte- Verbergen und Anzeigen

jQuery bietet eine einfache Oberfläche, um eine Vielzahl von erstaunlichen Effekten auszuführen.

jQuery Effektmethoden ermöglichen es uns, häufig verwendete Effekte mit minimaler Konfiguration schnell umzusetzen.

jQuery hide() und show()

Sie könnenhide()undshow()Methoden verbergen und anzeigen HTML-Elemente.

Das folgende Beispiel zeigt die Verwendung der Methoden hide() und show():

//　Normalerweise sichtbare Absätze ausblenden
$("#hide-btn").click(function(){
　　$("p").hide();
});
//　Versteckte Absätze anzeigen
$("#show-btn").click(function(){
　　$("p").show();
});

Dies isthide() Syntax des Methoden:

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

Dies istshow()Syntax des Methoden:

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

hide()undshow()Die Methode akzeptiert drei optionale Parameter:

• duration -Bestimme, wie lange der EffektDauerWie lange. Mögliche Werte: "slow", "fast" oder Millisekunden

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

• callback-Funktion, die nach Abschluss der angegebenen Methode aufgerufen wird

Das folgende Beispiel zeigt durch hide() und show()durationParameter:

$("#hide-btn").click(function(){
　　$("p").hide(1000);
});
$("#show-btn").click(function(){
　　$("p").show(1000);
});

Das folgende Beispiel zeigt mit hide() und show()RückrufParameter:

$("#hide-btn").click(function(){
　　$("div").hide(1000,　function(){
　　　　alert("DIV wurde ausgeblendet");
　　});
});
$("#show-btn").click(function(){
　　$("div").show(1000,　function(){
　　　　alert("DIV wurde angezeigt");
　　});
});

alle Animationen (im Beispiel die Wörter) schnell ausblenden, in200 Millisekunden jede Animation abgeschlossen:

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

jQuery toggle() Methode

Wir können auchtoggle()Die Methode schaltet zwischen dem Ausblenden und Zeigen von HTML-Elementen um.

Wenn das ausgewählte Element ursprünglich sichtbar ist, wird es ausgeblendet; wenn ausgeblendet, wird es angezeigt.

Der folgende Beispiel blendet alle Elemente ein und aus, wenn der Button geklickt wird<p>Umschalten zwischen Elementen:

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

toggle()Die Syntax der Methode lautet wie folgt:

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

toggle()Die Methode akzeptiert drei optionale Parameter:

• duration　 -Bestimme, wie lange der EffektDauerWie lange. Mögliche Werte: "slow", "fast" oder Millisekunden

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

• callback-Funktion, die nach Abschluss der angegebenen Methode aufgerufen wird

jQuery Effekt Referenz

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