Methode fadeToggle

Die Methode fadeToggle blendet Elemente der Reihe nach sanft ein oder aus, indem sie deren Deckkraft animiert.

Syntax

Ein-/Ausblenden über eine bestimmte Zeit, standardmäßig 400ms:

.fadeToggle(Dauer);

Die Zeit kann nicht nur in Millisekunden angegeben werden, sondern auch mit den Schlüsselwörtern slow (600ms) und fast (200ms), wobei ein größerer Wert eine langsamere Animation bedeutet:

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

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

.fadeToggle();

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

.fadeToggle(Dauer, [Übergangsfunktion], [Callback-Funktion]);

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

.fadeToggle(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, legen wir die Dauer und die Übergangsfunktion fest:

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

Beispiel

Im folgenden Beispiel wird beim ersten Klick auf die Schaltfläche #toggle das Element mit #test ausgeblendet, und beim erneuten Klick - eingeblendet. Dafür verwenden wir die Methode fadeToggle. Außerdem legen wir die Geschwindigkeit auf 1000ms und den Wert der Übergangsfunktion auf linear fest:

<button id="toggle">toggle</button>
<div id="test"></div>

#test {
	width: 200px;
	height: 200px;
	background: green;
	color: white;
	margin-top: 10px;
}

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

Siehe auch

die Methode slideToggle,
die sanftes Ein-/Ausblenden von Elementen abwechselt
die Methode fadeTo,
die die Deckkraft von Elementen ändert
die Methode toggle,
die sanftes Ein-/Ausblenden von Elementen abwechselt
die Methode animate,
die Eigenschaften von Elementen animiert