fadeIn-metodi
fadeIn-metodi näyttää piilotetut
elementit pehmeästi tekemällä niistä läpinäkymättömiä. Elementit
voidaan piilottaa käyttämällä
fadeOut-metodia,
tekemällä niistä läpinäkyviä.
Syntaksi
Näyttö annetussa ajassa,
400ms oletusarvoisesti:
.fadeIn(kesto);
Aikaa voidaan asettaa ei vain millisekunteina,
vaan myös avainsanoilla slow (600ms)
ja fast (200ms), mitä suurempi arvo,
sitä hitaampi animaatio:
.fadeIn('slow' tai 'fast');
Jos parametreja ei määritetä - animaatiota ei tapahdu, elementit näytetään välittömästi:
.fadeIn();
Voidaan myös toisena parametrina antaa easing-funktio, sekä kolmantena callback-funktio - suoritetaan animaation valmistumisen jälkeen. Molemmat parametrit ovat valinnaisia:
.fadeIn(kesto, [easing-funktio], [callback-funktio]);
Metodille voidaan antaa erilaisia asetuksia, JavaScript-objektin muodossa, joka sisältää avain: arvo -pareja:
.fadeIn(options);
Tällainen objekti voi välittää seuraavia
parametreja ja funktioita - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Kuvauksen
näistä parametreista voit katsoa metodille
animate. Esimerkiksi,
asetetaan kesto ja easing-funktio:
.fadeIn( {duration: 800, easing: easeInSine} );
Esimerkki
Seuraavassa esimerkissä painettaessa painiketta
#hide elementti #test
piilotetaan käyttämällä fadeOut-metodia,
ja painiketta #show - näytetään, käyttämällä
fadeIn-metodia. Asetamme myös
nopeudeksi 1000ms:
<button id="hide">hide</button>
<button id="show">show</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);
});
Esimerkki
Ja seuraavassa esimerkissä animaation valmistumisen jälkeen
elementin #test näyttämisen yhteydessä
tulostamme viestin
tekstillä '!', ja piilottamisen yhteydessä
tekstillä '?':
<button id="hide">hide</button>
<button id="show">show</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('?');
});
});
