fadeOut, fadeIn e fadeToggle sono tre metodi abbastanza simili a hide e show e toggle. Il primo infatti (fadeOut) fa gradualmente scomparire un elemento, mentre il secondo (fadeIn) lo fa ricomparire. Infine fadeToggle serve per alternare fadeOut e fadeIn.
La sintassi è la seguente:
$(selettore).fadeIn(speed,callback);
$(selettore).fadeToggle(speed,callback);
Come si può osservare, rispetto ai metodi hide, show e toggle qui manca il parametro per la easing dell'animazione.
La differenza fondamentale rispetto a hide, show e toggle è che questi tre nuovi metodi si limitano a variare gradualmente l'opacità (fino a zero) dell'elemento a cui sono applicati, mentre hide, show e toggle ne variano anche gradualmente le dimensioni.
In particolare il metodo fadeIn ha un effetto più "brusco" rispetto a show, in quanto prima l'oggetto viene istantaneamente mostrato a dimensioni piene (quindi occupa lo spazio a lui destinato sulla pagina) e poi gradualmente la sua opacità aumenta sino a renderlo visibile.
Si consideri per esempio il codice seguente:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#avviso").html("fadeOut iniziato, velocità 2000 ms");
$("h1").fadeOut(2000, function(){$("#avviso").html("Hide terminato");} );
});
$("#btn2").click(function(){
$("#avviso").html("fadeOut iniziato, velocità 4000 ms");
$("h1").fadeIn(4000, function(){$("#avviso").html("Show terminato");} );
});
$("#btn3").click(function(){
$("#avviso").html("fadeToggle iniziato, parametri di default");
$("h1").fadeToggle(function(){$("#avviso").html("Toggle terminato");} );
});
});
</script>
</head>
<body>
<h1>Mostra e nascondi</h1> <p>Clicca su uno dei bottoni qui sotto:</p> <p id="avviso"></p>
<button id="btn1">fadeOut</button> <button id="btn2">fadeIN</button> <button id="btn3">fadeToggle</button>
</body> </html>
L'animazione prodotta è la seguente:
fadeIn e fadeOut
Clicca su uno dei bottoni qui sotto:
E' anche interessante notare come è possibile far "lampeggiare" un oggetto, concatenando insieme più metodi fadeOut e fadeIn come mostrato qui sotto:
In questo caso l'elemento (o gli elementi) div viene dapprima cancellato, quindi ridisegnato, poi ricancellato e così via, per il numero di volte che si desidera.
precedente
Sito realizzato in base al template offerto da
http://www.graphixmania.it
