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:

javascript.fadeOut(kesto);

Aikaa voidaan asettaa ei vain millisekunteina, vaan myös avainsanoilla slow (600ms) ja fast (200ms), mitä suurempi arvo, sitä hitaampi animaatio:

javascript.fadeOut('slow' tai 'fast');

Jos parametreja ei määritetä - animaatiota ei tapahdu, elementit piiloutuvat välittömästi:

javascript.fadeOut();

Voidaan myös toisena parametrina antaa liukufunktio, ja kolmantena callback-funktio - suoritetaan animaation valmistumisen jälkeen. Molemmat parametrit ovat valinnaisia:

javascript.fadeOut(kesto, [liukufunktio], [callback-funktio]);

Metodille voidaan antaa erilaisia asetuksia, JavaScript-objektin muodossa, joka sisältää avain: arvo -pareja:

javascript.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:

javascript.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:

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#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ä '?':

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

Katso myös