Metoden slideUp

Metoden slideUp döljer element mjukt genom att dra upp dem från botten till toppen. Visa element kan göras med metoden slideDown.

Syntax

Dölj under given tid, 400ms som standard:

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

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

Om parametrar inte anges - animation kommer inte att finnas, element kommer att döljas omedelbart:

.slideUp();

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

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

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

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

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

Exempel

Låt oss efter att ha klickat på knappen, mjukt dölja föräldra-div, som innehåller input och knapp, med metoden slideUp (denna div hittar vi med metoden parent). Genom att skicka nyckelordet slow ställer vi in hastigheten till 600ms. I div med #test skriver vi texten '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');
	});
});

Se även

metoden slideDown,
som visar element mjukt
metoden slideToggle,
som växlar mellan mjuk visning/döljning av element
metoden fadeOut,
som mjukt döljer element, gör dem genomskinliga
metoden hide,
som döljer element mjukt