Methode toggle

Die Methode toggle schaltet sanft zwischen der Anzeige und dem Ausblenden von Elementen um. Wenn ein Element angezeigt wird, wird es ausgeblendet und umgekehrt.

Syntax

Anzeige über eine bestimmte Zeit in Millisekunden, standardmäßig 400ms:

.toggle(Dauer);

Die Zeit kann nicht nur in Millisekunden angegeben werden, sondern auch mit den Schlüsselwörtern slow (600ms) und fast (200ms). Je größer der Wert, desto langsamer die Animation:

.toggle('slow' oder 'fast');

Mit dem Parameter display können die Werte true oder false übergeben werden. Bei true wird das Element nur angezeigt, bei false ausgeblendet:

.toggle(display);

Wenn keine Parameter angegeben werden - erfolgt keine Animation, Elemente werden sofort angezeigt/ausgeblendet:

.toggle();

Als zweiten Parameter kann auch eine Easing-Funktion übergeben werden, sowie als dritten einen Callback-Funktion - wird nach Abschluss der Animation ausgeführt. Beide Parameter sind optional:

.toggle(Dauer, [Easing-Funktion], [Callback-Funktion]);

Es kann auch einfach ein zweiter optionaler Parameter eine Callback-Funktion übergeben werden - wird nach Abschluss der Animation ausgeführt:

.toggle(Dauer, [Callback-Funktion]);

Der Methode können verschiedene Optionen übergeben werden, in Form eines JavaScript-Objekts, das Schlüssel-Wert-Paare enthält:

.toggle(Optionen);

Ein solches Objekt kann die folgenden Parameter und Funktionen übergeben - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Die Beschreibung dieser Parameter können Sie für die Methode animate nachsehen. Zum Beispiel, lassen Sie uns Dauer und Easing-Funktion setzen:

.toggle( {duration: 800, easing: easeInSine} );

Beispiel

Lassen Sie uns nach einem Klick auf den Button einen versteckten Absatz sanft mit der Methode toggle anzeigen. Durch die Übergabe des Schlüsselworts slow setzen wir die Geschwindigkeit auf 600ms. Bei erneutem Klick - wird er ausgeblendet:

<button>Text anzeigen</button>
<p style="display: none">Text</p>

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

Siehe auch

die Methode fadeToggle,
die die Transparenz der Elemente ändert
die Methode slideToggle,
die sanft zwischen der Anzeige und dem Ausblenden von Elementen umschaltet
die Methode show,
die Elemente sanft anzeigt
die Methode hide,
die Elemente sanft ausblendet