fadeOut-metodi
fadeOut-metodi piilottaa
elementit pehmeästi. Elementit voidaan näyttää käyttämällä
fadeIn-metodia,
tekemällä niistä läpinäkymättömiksi.
Syntaksi
Näyttö annetun ajan kuluessa,
400ms oletusarvoisesti:
.fadeOut(kesto);
Aikaa voidaan asettaa ei vain millisekunteina,
vaan myös avainsanoilla slow (600ms)
ja fast (200ms), mitä suurempi arvo,
sitä hitaampi animaatio:
.fadeOut('slow' tai 'fast');
Jos parametreja ei määritetä - animaatiota ei tapahdu, elementit piiloutuvat välittömästi:
.fadeOut();
Voidaan myös toisena parametrina antaa liukufunktio, ja kolmantena callback-funktio - suoritetaan animaation valmistumisen jälkeen. Molemmat parametrit ovat valinnaisia:
.fadeOut(kesto, [liukufunktio], [callback-funktio]);
Metodille voidaan antaa erilaisia asetuksia, JavaScript-objektin muodossa, joka sisältää avain: arvo -pareja:
.fadeOut(asetukset);
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 liukufunktio:
.fadeOut( {duration: 800, easing: easeInSine} );
Esimerkki
Seuraavassa esimerkissä napin painamisen yhteydessä
#hide elementti #test
piilotetaan käyttämällä fadeOut-metodia,
ja napin #show yhteydessä - 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
Seuraavassa esimerkissä animaation päätyttyä
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('?');
});
});
