Come modificare l'opacità/trasparenza di un elemento in jQuery
Per modificare l'opacità e la trasparenza di un elemento della pagina html con un effetto dissolvenza utilizzo il metodo fadeTo() di jQuery
fadeout(durata, opacità [, complete]);
La funzione ha due parametri facoltativi
- Durata
E' il tempo in cui si verifica l'animazione. Di default è 400 millisecondi. Se è un numero intero indica i millisecondi del processo di animazione. Può anche essere una stringa del tipo "slow" oppure "fast". - Opacità
E' un numero tra 0 e 1 che indica il livello di opacità/trasparenza. Dove 0 è la trasparenza totale. - Complete
E' la funzione da chiamare al termine dell'animazione. E' un'opzione facoltativa.
Questa funzione modifica il livello di opacità / trasparenza di un elemento con un effetto dinamico di dissolvenza.
Un esempio pratico
Ecco un esempio di animazione fadeTo
<!DOCTYPE html>
<html>
<head>
<style>
#box { width:100px; height:100px; text-align:center; background:#f00; font-size:14px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="clickme">Click here</div>
<div id="box">my box</div>
<p>Hello World!</p>
<script>
$( "#clickme" ).click(function() {
$("#box").fadeTo("slow",0.3);
});
</script>
</body>
</html>
Quando l'utente clicca sull'elemento con id=clickme nel documento html, lo script applica il metodo fadeTo() all'elemento con id=box.
In questo caso l'opacità finale dell'elemento è fissata a 0.3 ossia al 30%.
Quindi, l'elemento diventa trasparente al 70%.
E così via
