Metoden slideDown

Metoden slideDown visar dolda element mjukt genom att rulla ner dem från toppen. Element kan döljas med metoden slideUp.

Syntax

Visning under en given tid, 400ms som standard:

.slideDown(varaktighet);

Tiden kan anges inte bara i millisekunder, utan också med nyckelorden slow (600ms) och fast (200ms), ju högre värde, desto långsammare animation:

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

Om inga parametrar anges - kommer ingen animation att ske, elementen visas omedelbart:

.slideDown();

Man kan också skicka en easing-funktion som andra parameter, samt en callback-funktion som tredje - triggas efter animationen är klar. Båda parametrarna är valfria:

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

Man kan skicka olika alternativ till metoden, i form av ett JavaScript-objekt som innehåller par av nyckel: värde:

.slideDown(options);

Ett sådant objekt kan skicka följande parametrar och funktioner - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Beskrivning av dessa parametrar kan du se för metoden animate. Till exempel, låt oss ställa in varaktighet och easing-funktion:

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

Exempel

Låt oss efter ett klick på knappen, mjukt visa ett dolt stycke med metoden slideDown. Genom att skicka nyckelordet slow ställer vi in hastigheten till 600ms. Efter att animationen är klar skriver vi ut 'Animation complete' till konsolen:

<button>visa text</button>
<p style="display: none">text</p>

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

Se även

metoden slideUp,
som döljer element mjukt
metoden slideToggle,
som växlar mellan mjuk visning/döljning av element
metoden fadeIn,
som visar dolda element mjukt genom att göra dem ogenomskinliga
metoden show,
som visar element mjukt