Come fare l'effetto fade out in jQuery
Per fare un'animazione di dissolvenza in uscita (fade out) di un elemento della pagina web utilizzo il metodo fadeOut() di jQuery
fadeout([durata][, complete]);
La funzione ha due parametri facoltativi
- Durata
Indica il tempo in cui deve concludersi l'animazione. Di default è 400 millisecondi. - Complete
E' la funzione da chiamare ed eseguire al termine dell'animazione. E' facoltativa.
Questa funzione rimuove un elemento dalla pagina con un effetto fade out. L'oggetto diventa sempre più trasparente fino a scomparire del tutto dalla pagina html.
Un esempio pratico
Ecco un esempio pratico di animazione fade-out
<!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").fadeOut();
</script>
</body>
</html>
Lo script seleziona gli elementi con id=box nel documento html e gli applica il metodo fadeOut() di dissolvenza in uscita.
L'animazione è però troppo veloce.
Modifico lo script impostando un tempo di dissolvenza pari a 5000 millisecondi (5 secondi).
<script>
$("#box").fadeOut(5000);
</script>
Dopo questa modifica l'animazione di dissolvenza è più graduale.
In entrambi i casi al termine della dissolvenza l'elemento css selezionato (#box) viene nascosto (hide) dal documento html.
Per questo motivo alla fine il testo Hello World! sale verso l'alto.
Come richiamare una funzione al termine della dissolvenza
Il metodo fadeout() consente anche di richiamare un'altra funzione al termine della disolvenza.
Ad esempio
<script>
$("#box").fadeOut(5000,function() { console.log("end"); });
</script>
Come legare la dissolvenza in uscita a un evento
In questo documento subordino l'inizio della dissolvenza al verificarsi di un evento.
La dissolvenza inizia solo quando l'utente clicca 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>
$( "#clickme" ).click(function() {
$("#box").fadeOut(5000,function() { console.log("end"); });
});
</script>
</body>
</html>
In questo caso l'animazione si avvia solo dopo il click sull'elemento #clickme
E così via.
