Methode slideUp

De methode slideUp verbergt elementen soepel door ze van onder naar boven op te rollen. Elementen tonen kan met de methode slideDown.

Syntaxis

Verbergen over een opgegeven tijd, standaard 400ms:

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

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

Als je geen parameters opgeeft - zal er geen animatie zijn, elementen worden onmiddellijk verborgen:

.slideUp();

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:

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

.slideUp(opties);

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. Laten we bijvoorbeeld de duur en easing-functie instellen:

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

Voorbeeld

Laten we na een knopklik de ouder-div, die de input en knop bevat, soepel verbergen met de methode slideUp (deze div vinden we met de methode parent). Door het sleutelwoord slow door te geven, stellen we de snelheid in op 600ms. In de div met #test geven we de tekst 'Text is hidden' weer:

<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');
	});
});

Zie ook

methode slideDown,
die elementen soepel toont
methode slideToggle,
die soepel tonen/verbergen van elementen afwisselt
methode fadeOut,
die elementen soepel verbergt door ze transparant te maken
methode hide,
die elementen soepel verbergt