Metodo toggle

Il metodo toggle alterna la visualizzazione/nascondimento fluido degli elementi. Se un elemento è visibile, verrà nascosto e viceversa.

Sintassi

Mostra per un tempo specificato in millisecondi, 400ms di default:

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

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

È possibile passare il parametro display con valore true o false. Se true, l'elemento sarà solo mostrato, false - solo nascosto:

.toggle(display);

Se non si specificano parametri - non ci sarà animazione, gli elementi verranno mostrati/nascosti istantaneamente:

.toggle();

È anche possibile passare come secondo parametro una funzione di easing, e come terzo una funzione di callback - che viene eseguita al completamento dell'animazione. Entrambi i parametri sono opzionali:

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

Si può passare semplicemente come secondo parametro opzionale una funzione di callback - che viene eseguita al completamento dell'animazione:

.toggle(durata, [funzione di callback]);

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

.toggle(opzioni);

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

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

Esempio

Dopo aver cliccato il pulsante, mostriamo in modo fluido un paragrafo nascosto utilizzando il metodo toggle. Passando la parola chiave slow, impostiamo la velocità a 600ms. Al click successivo - lo nascondiamo:

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

$('button').click(function() {
	$('p').toggle('slow');
});

Vedi anche

metodo fadeToggle,
che cambia l'opacità degli elementi
metodo slideToggle,
che alterna la visualizzazione/nascondimento fluido degli elementi
metodo show,
che mostra gli elementi in modo fluido
metodo hide,
che nasconde gli elementi in modo fluido