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:

javascript.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:

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

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

javascript.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:

javascript.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:

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

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

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

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

Vedi anche