Methode slideToggle
Die Methode slideToggle blendet
versteckte Elemente sanft ein und angezeigte aus.
Syntax
Ein-/Ausblenden über eine festgelegte Zeit,
standardmäßig 400ms:
.slideToggle(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:
.slideToggle('slow' oder 'fast');
Wenn keine Parameter angegeben werden - erfolgt keine Animation, die Elemente werden sofort ein-/ausgeblendet:
.slideToggle();
Als zweiten Parameter kann auch eine Beschleunigungsfunktion übergeben werden, sowie als dritten Parameter eine Callback-Funktion - wird nach Abschluss der Animation ausgeführt. Beide Parameter sind optional:
.slideToggle(Dauer, [Beschleunigungsfunktion], [Callback-Funktion]);
Der Methode können verschiedene Optionen übergeben werden, in Form eines JavaScript-Objekts, das Schlüssel: Wert-Paare enthält:
.slideToggle(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 Dauer und Beschleunigungsfunktion fest:
.slideToggle( {duration: 600, easing: easeInSine} );
Beispiel
Lassen Sie uns nach einem Klick auf die Schaltfläche den
übergeordneten div, der die Absätze enthält,
sanft mit der Methode slideToggle ausblenden (diesen div
finden wir mit der Methode
parent).
Nach einem erneuten Klick auf die Schaltfläche wird der div
wieder sanft eingeblendet usw. Durch die Übergabe des Schlüsselworts
slow setzen wir die Geschwindigkeit auf 600ms:
<button>toggle text</button>
<div>
<p id='test'>text text text text text text text</p>
<p>text text text text text text text</p>
<p>text text text text text text text</p>
</div>
$('button').click(function() {
$('#test').parent().slideToggle('slow');
});
