jQuery: Elemente einblenden und ausblenden

In diesem Tutorial möchte ich euch zeigen, wie ihr mit der Hilfe von JavaScript und jQuery ein sichtbares HTML-Element verschwinden lassen könnt beziehungsweise wie ihr ein unsichtbares wieder sichtbar macht.

Darüber hinaus schauen wir uns am Ende dieses Tutorials an, wie ihr mit der toggle-Funktion unkompliziert zwischen der Sichtbarkeit und der Unsichtbarkeit eines Elementes hin und her wechseln könnt.

• Element anzeigen
• Element ausblenden
• Element abwechselnd zeigen und verbergen
• Dauer des Einblendens oder des Ausblendens beeinflussen

Element anzeigen

Als Ausgangspunkt haben wir den folgenden unsichtbaren DIV-Container.

<div id="d" style="display:none">Unsichtbar</div>

Diese Box möchten wir nun anzeigen beziehungsweise einblenden. Für das sichtbar machen eines HTML-Elementes kennt jQuery die Funktion .show(), die wir nun einfach mit der ID unserer DIV-Box aufrufen:

$("#d").show();

Mit einer vorangestellten Raute # sprechen wir Elemente über ihre IDs an, mit einem vorangestellten Punkt . können wir mehrere Elemente über ihre Klasse ansprechen.

Element ausblenden

Analog zu der .show() Funktion für das Einblenden, stellt jQuery die Funktion .hide() für das Ausblenden von Elementen zur Verfügung.

$("#d").hide();

Diese Funktion funktioniert ansonsten genauso wie .show().

Element abwechselnd zeigen und verbergen

Manchmal haben wir die Situation, dass wir ein Element abwechselnd sichtbar oder unsichtbar machen wollen, je nachdem in welchem Zustand sich das Element gerade befindet. Eine aufwändige Funktion mit .show() und .hide() brauchen wir dafür aber nicht zu schreiben, denn jQuery kennt die Funktion .toggle().

$("#d").toggle();

Mit .toggle() wird hier die DIV-Box mit der ID "d" immer dann eingeblendet, wenn sie gerade unsichtbar ist beziehungsweise ausgeblendet, wenn sie gerade sichtbar ist.

Dauer des Einblendens oder des Ausblendens beeinflussen

Wenn uns das Einblenden oder das Ausblenden der Elemente zu schnell oder zu langsam geht, können wir den Funktionen .show(), .hide() und .toggle() als Parameter einen Zeitwert in Millisekunden übergeben, der angibt, wie viel Zeit sich die Funktion lassen soll.

Der Default ist 400 ms. Soll es doppelt so lange dauern können wir zum Beispiel .show(800) schreiben. Neben einem beliebigen Zahlenwert können wir auch die Strings "slow" oder "fast" übergeben, die für 600 beziehungsweise 200 ms stehen.