Methode slideUp

Die Methode slideUp blendet Elemente sanft aus, indem sie sie von unten nach oben zusammenrollt. Elemente können mit der Methode slideDown eingeblendet werden.

Syntax

Ausblenden über eine festgelegte Dauer, standardmäßig 400ms:

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

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

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

.slideUp();

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

.slideUp(Dauer, [Beschleunigungsfunktion], [Callback-Funktion]);

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

.slideUp(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 nachlesen. Zum Beispiel, legen wir Dauer und Beschleunigungsfunktion fest:

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

Beispiel

Lassen Sie uns nach dem Drücken der Taste, das übergeordnete div, das das Input-Feld und die Taste enthält, sanft mit der Methode slideUp ausblenden (dieses div finden wir mit der Methode parent). Indem wir das Schlüsselwort slow übergeben, legen wir die Geschwindigkeit auf 600ms fest. In das div mit #test schreiben wir den Text 'Text is hidden':

<div>
	<button>hide text</button>
	<input type="text" value="aaa">
</div>
<div id="test"></div>

$('button').click(function() {
	$(this).parent().slideUp('slow', function() {
		$('#test').text('Text is hidden');
	});
});

Siehe auch

Methode slideDown,
die Elemente sanft einblendet
Methode slideToggle,
die sanftes Ein-/Ausblenden von Elementen abwechselt
Methode fadeOut,
die Elemente sanft ausblendet, indem sie durchsichtig gemacht werden
Methode hide,
die Elemente sanft ausblendet