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:

javascript.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:

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

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

javascript.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:

javascript.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:

javascript.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:

javascript.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:

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

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

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

Siehe auch