jQuery: Elemente einblenden und ausblenden
Tutorial von Stefan Trost | Letztes Update am 17.02.2023 | Erstellt am 12.08.2016
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.
Über den Autor
Software von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen
Ähnliche Themen
jQuery: Mehrere Elemente einblenden und ausblenden
Frage | 3 Antworten
Chinesisches Horoskop: Tierkreiszeichen und Elemente
Info | 0 Kommentare
HTML: Unterschied zwischen ID und CLASS
Info | 0 Kommentare
CSS-Stylesheets in HTML einbinden
Tutorial | 0 Kommentare
jQuery: Ist Element vorhanden?
Tipp | 1 Kommentar
JavaScript: Arrays erstellen und nutzen
Info | 0 Kommentare
PHP: Alle leeren Elemente aus String-Array entfernen
Tipp | 0 Kommentare
Wichtiger Hinweis
Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.
Jetzt mitmachen
Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.