Metodo fadeOut
Il metodo fadeOut nasconde gradualmente
gli elementi. È possibile mostrare gli elementi utilizzando il metodo
fadeIn,
rendendoli opachi.
Sintassi
Mostra in un tempo specificato,
400ms di default:
.fadeOut(durata);
Il tempo può essere specificato non solo in millisecondi,
ma anche con le parole chiave slow (600ms)
e fast (200ms), maggiore è il valore,
più lenta è l'animazione:
.fadeOut('slow' o 'fast');
Se non si specificano parametri - non ci sarà animazione, gli elementi verranno nascosti istantaneamente:
.fadeOut();
È anche possibile passare come secondo parametro una funzione di easing, e come terzo parametro una funzione di callback - che verrà eseguita al termine dell'animazione. Entrambi i parametri sono opzionali:
.fadeOut(durata, [funzione di easing], [funzione di callback]);
È possibile passare al metodo varie opzioni, sotto forma di un oggetto JavaScript, contenente coppie chiave: valore:
.fadeOut(opzioni);
Un tale oggetto può trasmettere i seguenti
parametri e funzioni - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. La descrizione
di questi parametri è disponibile per il metodo
animate. Ad esempio,
impostiamo la durata e la funzione di easing:
.fadeOut( {duration: 800, easing: easeInSine} );
Esempio
Nel seguente esempio, cliccando sul pulsante
#hide l'elemento con #test verrà
nascosto utilizzando il metodo fadeOut,
e cliccando sul pulsante #show - verrà mostrato, con
fadeIn. Imposteremo anche
la velocità su 1000ms:
<button id="hide">nascondi</button>
<button id="show">mostra</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000);
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000);
});
Esempio
Nel seguente esempio, al termine
dell'animazione quando si mostra l'elemento #test,
visualizzeremo un messaggio
con il testo '!', e quando si nasconde
con il testo '?':
<button id="hide">nascondi</button>
<button id="show">mostra</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
