Nella lezione precedente, abbiamo visto come mostrare e nascondere gli elementi con un'animazione di scorrimento. Ora vediamo come farlo con un'animazione di dissolvenza con jQuery.
.fadeIn() e .fadeOut(). Lo imparerai in questa lezione 😉Per mostrare e nascondere un elemento tramite dissolvenza, o semplicemente per animarlo (sempre con dissolvenza), in jQuery esistono alcuni metodi specifici.
| Metodo | Descrizione |
.fadeIn() | Mostra gradualmente l'elemento specificato rendendolo visibile. |
.fadeOut() | Nasconde gradualmente l'elemento specificato rendendolo invisibile. |
.fadeTo() | Cambia gradualmente l'opacità dell'elemento specificato per raggiungere un valore specificato. |
.fadeToggle() | Alterna tra fadeIn() e fadeOut() in base allo stato corrente dell'elemento specificato. |
Il metodo .fadeIn() viene utilizzato per rendere gradualmente visibile un elemento, passando da essere invisibile a visibile.
La sintassi è: $(selettore).fadeIn(durata, funzione). Il parametro durata (opzionale) specifica la durata dell'animazione in millisecondi o "slow" o "fast". Il parametro funzione (opzionale) specifica una funzione da eseguire dopo che l'animazione è completa.
Vediamo un esempio di questo metodo:
<div id="el" style="display:none;width:300px;height:100px;background-color:red"></div>
<script>
$("#el").fadeIn(1000, function(){
alert("Il div è visibile!");
});
</script>Nell'esempio, viene indicato il tempo dell'animazione (1000 millisecondi) e una funzione da eseguire al termine di questa.
Il metodo .fadeOut() serve per rendere gradualmente invisibile un elemento, passando da essere visibile a invisibile.
La sintassi è: $(selettore).fadeOut(durata, funzione). Il parametro durata (opzionale) specifica la durata dell'animazione in millisecondi, ma puoi scegliere di inserire "slow" o "fast". Il parametro funzione (opzionale) specifica una funzione da eseguire quando l'animazione è terminata.
Vediamo un esempio di .fadeOut():
<div id="el" style="width:300px;height:100px;background-color:red"></div>
<script>
$("#el").fadeOut("slow");
</script>Il metodo .fadeTo() può essere utilizzato per cambiare l'opacità di un elemento ad un valore specificato.
La sintassi di questo metodo è: $(selettore).fadeTo(durata, opacità, funzione). Vediamo i diversi parametri utilizzabili:
Vediamo un esempio:
<div id="el" style="width:300px;height:100px;background-color:red"></div>
<script>
// Cambia l'opacità del div a 0.5 in 1 secondo
$("#el").fadeTo(1000, 0.5);
</script>Il metodo .fadeToggle() viene utilizzato per alternare tra .fadeIn() e .fadeOut() in base allo stato dell'elemento. Se è visibile, viene nascosto; se è nascosto, diventa visibile.
La sintassi è: $(selettore).fadeToggle(durata, funzione). Il parametro durata (opzionale) specifica la durata dell'animazione in millisecondi, ma puoi anche inserire "slow" o "fast". Il parametro funzione (opzionale) specifica una funzione da eseguire quando l'animazione è completata.
Ecco un esempio di .fadeToggle():
<button id="btn">Mostra/Nascondi</button>
<div id="el" style="width:300px;height:100px;background-color:red"></div>
<script>
$("#btn").click(function(){
$("#el").fadeToggle("slow");
});
</script>Nell'esempio, abbiamo utilizzato un evento di click per far in modo di eseguire .fadeToggle() al click del pulsante.