jQuery-Effekte - Verstecken und Anzeigen


Ausblenden, Anzeigen, Umschalten, Schieben, Ausblenden und Animieren. BEEINDRUCKEND!

Klicken Sie hier, um das Bedienfeld anzuzeigen/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 eine einfache jQuery-Hide()-Methode.


Eine weitere hide()-Demonstration. So verbergen Sie Textteile.


jQuery hide() und show()

Mit jQuery können Sie HTML-Elemente mit den Methoden hide()und ein- und ausblenden:show()

Beispiel

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

Syntax:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

Der optionale Geschwindigkeitsparameter gibt die Geschwindigkeit des Verbergens/Anzeigens an und kann die folgenden Werte annehmen: "langsam", "schnell" oder Millisekunden.

Der optionale Callback-Parameter ist eine Funktion, die ausgeführt werden soll, nachdem die Methode hide()or show()abgeschlossen ist (mehr über Callback-Funktionen erfahren Sie in einem späteren Kapitel).

Das folgende Beispiel demonstriert den Geschwindigkeitsparameter mit hide():

Beispiel

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


jQuery umschalten ()

toggle()Sie können mit der Methode auch zwischen dem Ausblenden und Anzeigen eines Elements umschalten.

Eingeblendete Elemente werden ausgeblendet und ausgeblendete Elemente werden angezeigt:

Beispiel

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

Syntax:

$(selector).toggle(speed,callback);

Der optionale Geschwindigkeitsparameter kann die folgenden Werte annehmen: "langsam", "schnell" oder Millisekunden.

Der optionale Callback-Parameter ist eine Funktion, die nach Beendigung ausgeführt werden soll toggle().


jQuery-Übungen

Testen Sie sich mit Übungen

Übung:

Verwenden Sie eine jQuery-Methode, um ein <p>-Element auszublenden , wenn darauf geklickt wird.

$("p").click(function(){
  $(this).();
});


Referenz zu jQuery-Effekten

Eine vollständige Übersicht aller jQuery-Effekte finden Sie in unserer jQuery-Effekt-Referenz .