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:

javascript.fadeIn(kesto);

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

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

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

javascript.fadeIn();

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

javascript.fadeIn(kesto, [easing-funktio], [callback-funktio]);

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

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

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

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

Ja seuraavassa esimerkissä animaation valmistumisen jälkeen 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