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:

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

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

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

.fadeToggle();

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

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

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

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

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

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

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

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

Vaata ka

meetod slideToggle,
mis vaheldumisi näitab/peidab elemendid sujuvalt
meetod fadeTo,
muudab elementide läbipaistvust
meetod toggle,
mis vaheldumisi näitab/peidab elemendid sujuvalt
meetod animate,
animeerib elementide omadusi