jQuery: modificare l’opacità tramite fadeTo()

jQuery mette a disposizione dell’utente delle funzioni per effettuare il fade in e il fade out.
Con il fade in l’opacità di un elemento passa da 0 a 1, ossia l’elemento diventa visibile, con il fade out invece si ottiene l’opposto l’elemento diminuisce la sua opacità fino a sparire.
Non sempre però vogliamo che che il fade sia “completo”, cioè vogliamo fermarci ad un’opacità intermedia, ad esempio 0.5.


Per compiere tale operazione abbiamo a disposizione il metodo fadeTo(), la sintassi è:

.fadeTo( durata, opacità, [ callback ] )

  • durata è il tempo in millisecondi per la transizione dell’elemento dall’attuale opacità all’opacità desiderata
  • opacità è un valore compreso tra 0 e 1, e indica l’opacità finale dell’elemento selezionato
  • callback è un’eventuale funzione da eseguire al termine dell’animazione

Come valore di durata possiamo passare le stringhe ‘slow’ e ‘fast’, che corrispondono a 600 e 200 millisecondi,
come si può notare più il valore è basso più l’animazione è veloce.

Passando 0 come durata la variazione di opacità sarà immediata.