Metoda slideDown

Metoda slideDown afișează lin elementele ascunse, derulându-le de sus în jos. Elementele pot fi ascunse cu metoda slideUp.

Sintaxă

Afișare în timpul specificat, 400ms implicit:

.slideDown(durată);

Timpul poate fi specificat nu doar în milisecunde, ci și prin cuvintele cheie slow (600ms) și fast (200ms), cu cât valoarea este mai mare, cu atât animația este mai lentă:

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

Dacă parametrii nu sunt specificați - nu va exista animație, elementele vor fi afișate instantaneu:

.slideDown();

De asemenea, ca al doilea parametru poate fi transmisă o funcție de easing, iar ca al treilea parametru o funcție callback - se va executa după finalizarea animației. Ambii parametri sunt opționali:

.slideDown(durată, [funcție easing], [funcție callback]);

Metodei i se pot transmite diverse opțiuni, sub forma unui obiect JavaScript, care conține perechi cheie: valoare:

.slideDown(opțiuni);

Un astfel de obiect poate transmite următorii parametri și funcții - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Descrierea acestor parametri o puteți vedea pentru metoda animate. De exemplu, să setăm durata și funcția de easing:

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

Exemplu

După apăsarea butonului, să afișăm lin paragraful ascuns cu metoda slideDown. Transmițând cuvântul cheie slow, vom seta viteza la 600ms. După finalizarea animației vom afișa în consolă 'Animation complete':

<button>afișează text</button>
<p style="display: none">text</p>

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

Vedeți și

metoda slideUp,
care ascunde lin elementele
metoda slideToggle,
care alternează afișarea/ascunderea lină a elementelor
metoda fadeIn,
care afișează lin elementele ascunse, făcându-le opace
metoda show,
care afișează lin elementele