Metodo slideToggle
Il metodo slideToggle mostra in modo fluido
gli elementi nascosti e nasconde quelli visibili.
Sintassi
Mostrare/nascondere in un tempo dato,
400ms per impostazione predefinita:
.slideToggle(durata);
Il tempo può essere impostato non solo in millisecondi,
ma anche con le parole chiave slow (600ms)
e fast (200ms), maggiore è il valore,
più lenta è l'animazione:
.slideToggle('slow' o 'fast');
Se non si specificano parametri - non ci sarà animazione, gli elementi appariranno/scompariranno istantaneamente:
.slideToggle();
È anche possibile passare come secondo parametro una funzione di easing, e come terzo parametro una funzione di callback - che verrà eseguita al termine dell'animazione. Entrambi i parametri sono opzionali:
.slideToggle(durata, [funzione di easing], [funzione di callback]);
È possibile passare al metodo varie opzioni, sotto forma di oggetto JavaScript, contenente coppie chiave: valore:
.slideToggle(opzioni);
Un tale oggetto può trasmettere i seguenti
parametri e funzioni - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. La descrizione
di questi parametri può essere consultata per il metodo
animate. Ad esempio,
impostiamo la durata e la funzione di easing:
.slideToggle( {duration: 600, easing: easeInSine} );
Esempio
Dopo aver cliccato il pulsante, nascondiamo in modo fluido
il div genitore che contiene i paragrafi,
utilizzando il metodo slideToggle (questo div
lo troveremo utilizzando il metodo
parent),
dopo un secondo clic sul pulsante, il div
sarà mostrato di nuovo in modo fluido e così via. Passando la parola chiave
slow, imposteremo la velocità a 600ms:
<button>toggle text</button>
<div>
<p id='test'>text text text text text text text</p>
<p>text text text text text text text</p>
<p>text text text text text text text</p>
</div>
$('button').click(function() {
$('#test').parent().slideToggle('slow');
});
