Metodo fadeTo

Il metodo fadeTo modifica gradualmente l'opacità di un elemento fino al valore specificato, in un intervallo da 0 a 1.

Sintassi

La durata e l'opacità sono specificate in ogni caso d'uso del metodo. Modifica dell'opacità in un tempo dato, 400ms di default:

.fadeTo(durata, valore opacità);

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:

.fadeTo('slow' o 'fast', valore opacità);

È possibile passare come terzo parametro (opzionale) una funzione di callback - verrà eseguita al termine dell'animazione:

.fadeTo(durata, valore opacità, [funzione callback]);

È possibile passare anche una funzione di easing e una funzione di callback (parametri opzionali) - verrà eseguita al termine dell'animazione:

.fadeTo(durata, valore opacità, [funzione di easing], [funzione callback]);

Esempio

Nell'esempio seguente, utilizzando il metodo fadeTo alla pressione del pulsante #hide l'elemento con #test verrà nascosto diminuendo l'opacità a 0.5, mentre alla pressione di #show - verrà mostrato:

<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

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

$('#show').on('click', function() {
	$('#test').fadeTo(1000, 1);
});

$('#hide').on('click', function() {
	$('#test').fadeTo(1000, 0.5);
});

Vedi anche

metodo fadeToggle,
che modifica l'opacità degli elementi
metodo fadeIn,
che mostra gradualmente gli elementi nascosti, rendendoli opachi
metodo animate,
che anima le proprietà degli elementi