Metodas fadeTo

Metodas fadeTo sklandžiai keičia permatomumą elemento iki nurodytos reikšmės, diapazone nuo 0 iki 1.

Sintaksė

Trukme ir permatomumas nurodomi bet kuriuo metodo naudojimo variantu. Permatomumo pakeistas per nurodytą laiką, 400ms pagal nutylėjimą:

.fadeTo(trukme, permatomumo reikšmė);

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:

.fadeTo('slow' arba 'fast', permatomumo reikšmė);

Taip pat galima trečiu (neprivalomu) parametru perduoti callback funkciją - suveiks po animacijos atlikimo:

.fadeTo(trukme, permatomumo reikšmė, [callback funkcija]);

Taip pat galima perduoti sklandumo funkciją ir callback funkciją (neprivalomi parametrai) - suveiks po animacijos atlikimo:

.fadeTo(trukme, permatomumo reikšmė, [sklandumo funkcija], [callback funkcija]);

Pavyzdys

Šiame pavyzdyje, naudojant metodą fadeTo paspaudus mygtuką #hide elementas su #test bus paslėpiamas sumažinant permatomumą iki 0.5, o paspaudus #show - rodomas:

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

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

$('#show').on('click', function() {
	$('#test').fadeTo(1000, 1);
});

$('#hide').on('click', function() {
	$('#test').fadeTo(1000, 0.5);
});

Taip pat žiūrėkite

metodas fadeToggle,
kuris keičia elementų permatomumą
metodas fadeIn,
kuris sklandžiai rodo paslėptus elementus, padarydamas juos nepermatomus
metodas animate,
kuris animuoja elementų savybes