Metodas fadeToggle

Metodas fadeToggle pakaitomis sklandžiai rodo arba paslepia elementus, animuodamas jų permatomumą.

Sintaksė

Rodymas/paslėpimas per nurodytą laiką, 400ms pagal nutylėjimą:

.fadeToggle(trukmė);

Laiką galima nurodyti ne tik milisekundėmis, bet ir raktažodžiais slow (600ms) ir fast (200ms), kuo didesnė reikšmė, tuo lėtesnė animacija:

.fadeToggle('slow' arba 'fast');

Jei nenurodysite parametrų - animacijos nebus, elementai bus rodomi/paslėpti akimirksniu:

.fadeToggle();

Taip pat galima antruoju parametru perduoti sklandumo funkciją, o trečiuoju callback funkciją - suveiks po animacijos užbaigimo. Abu parametrai nėra privalomi:

.fadeToggle(trukmė, [sklandumo funkcija], [callback funkcija]);

Metodui galima perduoti įvairias parinktis, JavaScript objekto pavidalu, kuriame yra poros raktas: reikšmė:

.fadeToggle(options);

Tokiame objekte galima perduoti šiuos parametrus ir funkcijas - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Šių parametrų aprašymą galite peržiūrėti metodo animate puslapyje. Pavyzdžiui, nustatykime trukmę ir sklandumo funkciją:

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

Pavyzdys

Šiame pavyzdyje pirmuoju paspaudimu mygtuką #toggle elementas su #test bus paslėptas, o paspaudus pakartotinai - rodytas. Tam mes naudojame metodą fadeToggle. Taip pat nustatysime greitį į 1000ms ir sklandumo funkcijos reikšmę į 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');
});

Taip pat žiūrėkite

metodas slideToggle,
kuris pakaitomis atlieka sklandų elementų rodymą/paslėpimą
metodas fadeTo,
kuris keičia elementų permatomumą
metodas toggle,
kuris pakaitomis atlieka sklandų elementų rodymą/paslėpimą
metodas animate,
kuris animuoja elementų savybes