Methode slideDown

De methode slideDown toont verborgen elementen soepel, door ze van boven naar beneden uit te rollen. Elementen kunnen worden verborgen met de methode slideUp.

Syntaxis

Weergave in een opgegeven tijd, standaard 400ms:

.slideDown(duur);

Tijd kan niet alleen in milliseconden worden opgegeven, maar ook met de sleutelwoorden slow (600ms) en fast (200ms), hoe hoger de waarde, hoe langzamer de animatie:

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

Als er geen parameters worden opgegeven - zal er geen animatie zijn, elementen worden onmiddellijk getoond:

.slideDown();

Je kunt ook als tweede parameter een easing-functie doorgeven, en als derde een callback-functie - deze wordt uitgevoerd na voltooiing van de animatie. Beide parameters zijn optioneel:

.slideDown(duur, [easing-functie], [callback-functie]);

Je kunt verschillende opties aan de methode doorgeven, in de vorm van een JavaScript-object, dat paren sleutel: waarde bevat:

.slideDown(options);

Zo'n object kan de volgende parameters en functies doorgeven - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Beschrijving van deze parameters kun je bekijken voor de methode animate. Bijvoorbeeld, laten we de duur en easing-functie instellen:

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

Voorbeeld

Laten we na een knopklik de verborgen alinea soepel tonen met de methode slideDown. Door het sleutelwoord slow door te geven, stellen we de snelheid in op 600ms. Na voltooiing van de animatie geven we 'Animation complete' weer in de console:

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

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

Zie ook

methode slideUp,
die elementen soepel verbergt
methode slideToggle,
die soepele weergave/verberging van elementen afwisselt
methode fadeIn,
die verborgen elementen soepel toont, door ze ondoorzichtig te maken
methode show,
die elementen soepel toont