Meetod fadeToggle

Meetod fadeToggle näitab või peidab elemendid kordamööda sujuvalt, animeerides nende läbipaistvust.

Süntaks

Näitamine/peitmine määratud aja jooksul, vaikimisi 400ms:

javascript.fadeToggle(kestus);

Aega saab määrata mitte ainult millisekundites, vaid ka võtmesõnadega slow (600ms) ja fast (200ms), mida suurem väärtus, seda aeglasem animatsioon:

javascript.fadeToggle('slow' või 'fast');

Kui parameetreid ei määrata - animatsiooni ei toimu, elemendid näidatakse/peidetakse koheselt:

javascript.fadeToggle();

Saab ka teise parameetrina edastada sujuvusfunktsiooni, ning kolmandana callback-funktsiooni - käivitatakse pärast animatsiooni lõppu. Mõlemad parameetrid on valikulised:

javascript.fadeToggle(kestus, [sujuvusfunktsioon], [callback-funktsioon]);

Saab meetodile edastada erinevaid valikuid, JavaScripti objekti kujul, mis sisaldab paare võti: väärtus:

javascript.fadeToggle(valikud);

Selline objekt saab edastada järgmisi parameetreid ja funktsioone - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Nende parameetrite kirjeldust saate vaadata meetodi animate puhul. Näiteks, määrame kestuse ja sujuvusfunktsiooni:

javascript.fadeToggle( {duration: 800, easing: easeInSine} );

Näide

Järgmises näites esimesel nupule #toggle vajutamisel element #test peidetakse, ja uuesti vajutamisel - näidatakse. Selleks kasutame meetodit fadeToggle. Samuti määrame kiiruseks 1000ms ja sujuvusfunktsiooni väärtuseks linear:

html<button id="toggle">toggle</button>
<div id="test"></div>

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

javascript$('#toggle').on('click', function() {
  $('#test').fadeToggle(1000, 'linear');
});

Vaata ka