Methode slideDown

Die Methode slideDown blendet versteckte Elemente sanft ein, indem sie sie von oben nach unten aufrollt. Elemente können mit der Methode slideUp ausgeblendet werden.

Syntax

Einblenden über eine festgelegte Zeit, standardmäßig 400ms:

.slideDown(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:

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

Wenn keine Parameter angegeben werden - erfolgt keine Animation, die Elemente werden sofort eingeblendet:

.slideDown();

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

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

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

.slideDown(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 Easing-Funktion fest:

.slideDown( {duration: 600, easing: easeInSine} );

Beispiel

Lassen wir nach einem Klick auf die Schaltfläche einen versteckten Absatz mit der Methode slideDown sanft einblenden. Durch die Übergabe des Schlüsselworts slow legen wir die Geschwindigkeit auf 600ms fest. Nach Ende der Animation geben wir 'Animation complete' in der Konsole aus:

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

$('button').click(function() {
	$('p').slideDown('slow', function() {
		console.log('Animation complete')
	});
});

Siehe auch

Methode slideUp,
die Elemente sanft ausblendet
Methode slideToggle,
die sanftes Ein-/Ausblenden von Elementen umschaltet
Methode fadeIn,
die versteckte Elemente sanft einblendet, indem sie sie undurchsichtig macht
Methode show,
die Elemente sanft einblendet