Metodo slideDown

Il metodo slideDown mostra gradualmente gli elementi nascosti, facendoli scorrere dall'alto verso il basso. Per nascondere gli elementi puoi utilizzare il metodo slideUp.

Sintassi

Mostra in un tempo specificato, 400ms di default:

.slideDown(durata);

Il tempo può essere specificato non solo in millisecondi, ma anche con le parole chiave slow (600ms) e fast (200ms), maggiore è il valore, più lenta è l'animazione:

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

Se non specifichi parametri - non ci sarà animazione, gli elementi verranno mostrati istantaneamente:

.slideDown();

Puoi anche passare come secondo parametro una funzione di easing, e come terzo una funzione di callback - che verrà eseguita al termine dell'animazione. Entrambi i parametri sono opzionali:

.slideDown(durata, [funzione di easing], [funzione di callback]);

Puoi passare al metodo varie opzioni, sotto forma di un oggetto JavaScript, contenente coppie chiave: valore:

.slideDown(opzioni);

Un tale oggetto può passare i seguenti parametri e funzioni - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. La descrizione di questi parametri la puoi consultare per il metodo animate. Ad esempio, impostiamo la durata e la funzione di easing:

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

Esempio

Facciamo in modo che dopo aver cliccato il pulsante, venga mostrato gradualmente un paragrafo nascosto utilizzando il metodo slideDown. Passando la parola chiave slow, imposteremo la velocità a 600ms. Al termine dell'animazione, mostreremo in console 'Animation complete':

<button>mostra testo</button>
<p style="display: none">testo</p>

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

Vedi anche

metodo slideUp,
che nasconde gradualmente gli elementi
metodo slideToggle,
che alterna la visualizzazione/nascondimento graduale degli elementi
metodo fadeIn,
che mostra gradualmente gli elementi nascosti, rendendoli opachi
metodo show,
che mostra gradualmente gli elementi