Come fare l'effetto fade in su jQuery
Per fare un'animazione di dissolvenza in entrata (fade in) di un elemento della pagina web uso il metodo fade In() di jQuery
fadeIn([durata][, complete]);
La funzione ha due parametri facoltativi
- Durata
Indica il tempo in cui deve concludersi la dissolvenza. Di default è 400 millisecondi. - Complete
E' la funzione da eseguire al termine della dissolvenza. E' un parametro facoltativo.
Questa funzione fa comparire progressivamente un elemento nascosto nella pagina web tramite un effetto fade in (dissolvenza in entrata).
Un esempio pratico
Ecco un esempio pratico di animazione fade-in
<!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="box">my box</div>
<p>Hello World!</p>
<script>
$("#box").hide();
$("#box").fadeIn();
</script>
</body>
</html>
Lo script seleziona gli elementi con id=box nel documento html.
Li nasconde con il metodo hide().
Poi gli applica il metodo fadeIn() di dissolvenza in entrata.
La dissolvenza è però troppo veloce.
Modifico lo script impostando un tempo di dissolvenza in entrata pari a 5000 millisecondi (5 secondi).
<script>
$("#box").hide();
$("#box").fadeIn(5000);
</script>
Questa rende l'animazione di dissolvenza più graduale.
In entrambi i casi al termine della dissolvenza in entrata l'elemento css selezionato (#box) è completamente visibile nel documento html.
Come richiamare una funzione al termine della dissolvenza in entrata
Il metodo fadeIn() mi permette di eseguire una funzione al termine della disolvenza in entrata.
Ad esempio
<script>
$("#box").hide();
$("#box").fadeIn(5000,function() { console.log("end"); });
</script>
Come vincolare la dissolvenza in entrata a un evento
In questo documento subordino l'inizio della dissolvenza in entrata al verificarsi di un evento.
Ad esempio, il click dell'utente sull'elemento #clickme
<!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>
<p>Hello World!</p>
<script>
$("#box").hide();
$( "#clickme" ).click(function() {
$("#box").fadeIn(5000);
});
</script>
</body>
</html>
Ora la dissolvenza in entrata inizia solo dopo il click sull'elemento #clickme
E così via.
