Metodo fadeIn
Il metodo fadeIn mostra fluidamente gli elementi nascosti,
rendendoli opachi. Nascondere
gli elementi è possibile con il metodo
fadeOut,
rendendoli trasparenti.
Sintassi
Visualizzazione in un tempo dato,
400ms di default:
.fadeIn(durata);
Il tempo può essere specificato non solo in millisecondi,
ma anche con le parole chiave slow (600ms)
e fast (200ms), più alto è il valore,
più lenta è l'animazione:
.fadeIn('slow' o 'fast');
Se non si specificano parametri - non ci sarà animazione, gli elementi verranno mostrati istantaneamente:
.fadeIn();
È anche possibile passare come secondo parametro una funzione di easing, e come terzo una funzione di callback - si attiverà al completamento dell'animazione. Entrambi i parametri sono opzionali:
.fadeIn(durata, [funzione di easing], [funzione di callback]);
È possibile passare al metodo varie opzioni, sotto forma di oggetto JavaScript, contenente coppie chiave: valore:
.fadeIn(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 la potete vedere per il metodo
animate. Ad esempio,
impostiamo la durata e la funzione di easing:
.fadeIn( {duration: 800, easing: easeInSine} );
Esempio
Nel seguente esempio, cliccando sul pulsante
#hide l'elemento con #test
verrà nascosto usando il metodo fadeOut,
e cliccando sul pulsante #show - verrà mostrato, con
il metodo fadeIn. Imposteremo inoltre
la velocità a 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, dopo il completamento
dell'animazione durante la visualizzazione dell'elemento #test,
visualizzeremo un messaggio
con il testo '!', e durante la nascondita
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('?');
});
});
