Metoden slideDown

Metoden slideDown viser skjulte elementer jævnt ved at rulle dem ned fra toppen. Du kan skjule elementer med metoden slideUp.

Syntaks

Visning over en angivet varighed, som standard 400ms:

.slideDown(varighed);

Tid kan angives ikke kun i millisekunder, men også med nøgleordene slow (600ms) og fast (200ms), hvor højere værdi betyder langsommere animation:

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

Hvis ingen parametre angives - vil der ikke være animation, elementer vil blive vist øjeblikkeligt:

.slideDown();

Du kan også sende en easing-funktion som anden parameter, samt en callback-funktion som tredje parameter - den udføres efter animationen. Begge parametre er valgfrie:

.slideDown(varighed, [easing-funktion], [callback-funktion]);

Du kan sende metoden forskellige indstillinger, i form af et JavaScript-objekt, der indeholder par af nøgle: værdi:

.slideDown(indstillinger);

Sådan et objekt kan sende følgende parametre og funktioner - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Beskrivelse af disse parametre kan du se for metoden animate. For eksempel, lad os sætte varigheden og easing-funktionen:

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

Eksempel

Lad os efter et klik på knappen jævnt vise det skjulte afsnit med metoden slideDown. Ved at sende nøgleordet slow indstiller vi hastigheden til 600ms. Efter afslutningen af animationen udskriver vi i konsollen 'Animation complete':

<button>vis tekst</button>
<p style="display: none">tekst</p>

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

Se også

metoden slideUp,
som jævnt skjuler elementer
metoden slideToggle,
som veksler mellem jævn visning/skjuling af elementer
metoden fadeIn,
som jævnt viser skjulte elementer, gør dem uigennemsigtige
metoden show,
som jævnt viser elementer