Metodo fadeToggle

Il metodo fadeToggle mostra o nasconde alternativamente gli elementi in modo fluido, animandone l'opacità.

Sintassi

Mostrare/nascondere in un tempo dato, 400ms di default:

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

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

Se non si specificano parametri - non ci sarà animazione, gli elementi appariranno/scompariranno istantaneamente:

.fadeToggle();

È 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:

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

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

.fadeToggle(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 è consultabile per il metodo animate. Ad esempio, impostiamo la durata e la funzione di easing:

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

Esempio

Nell'esempio seguente, alla prima pressione del pulsante #toggle l'elemento con #test verrà nascosto, mentre alla successiva - verrà mostrato. Per fare ciò utilizzeremo il metodo fadeToggle. Inoltre imposteremo la velocità su 1000ms e il valore della funzione di easing su linear:

<button id="toggle">toggle</button>
<div id="test"></div>

#test {
	width: 200px;
	height: 200px;
	background: green;
	color: white;
	margin-top: 10px;
}

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

Vedi anche

metodo slideToggle,
che alterna la visualizzazione/nascondimento fluido degli elementi
metodo fadeTo,
che modifica l'opacità degli elementi
metodo toggle,
che alterna la visualizzazione/nascondimento fluido degli elementi
metodo animate,
che anima le proprietà degli elementi