Come fare l'effetto dissolvenza con jQuery
Per realizzare una dissolvenza in entrata o in uscita di un elemento html utilizzo il metodo fadeToggle() di jQuery.
fadeToggle(duration, easing, complete)
La funzione ha tre parametri facoltativi
- duration
E' la durata in cui si compie l'effetto. Di default è 400 ms. - easing
Specifica l'andamento/velocità nei diversi punti dell'animazione (swing oppure linear). Di default è "swing". Con l'opzione "linear" l'animazione procede a ritmo costante. - complete
In questo parametro posso indicare la funzione da eseguire al termine della dissolvenza.
Il metodo fadeToggle() applica automaticamente la dissolvenza in uscita se l'elemento è visibile oppure la dissolvenza in entrata se l'elemento non è visibile.
Un esempio pratico
Ecco un esempio pratico di animazione fadeToggle
<!DOCTYPE html>
<html>
<head>
<style>
#box { width:100px; height:100px; text-align:center; background:#f00; font-size:14px; }
#clickme { width:100px; border:1px solid #000; }
</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>
<br>
<div id="box">my box</div>
<script>
$( "#clickme" ).click(function() {
$("#box").fadeToggle(5000);
});
</script>
</body>
</html>
Quando il browser apre la pagina il <div id="box> è visibile.
Cliccando su Click here il box rosso scompare con la dissolvenza in uscita.
Cliccando nuovamente su Click here il box rosso ricompare con la dissolvenza in entrata.
Nota. In entrambe le dissolvenze ho applicato una durata di 5000 ms ossia di cinque secondi. Tra l'inizio e la fine della dissolvenza intercorrono 5 secondi.
E così via.
