A fadeTo metódus

A fadeTo metódus simán megváltoztatja az átlátszóságot egy adott értékre, 0 és 1 között.

Szintaxis

Az időtartam és az átlátszóság bármely használati változatnál megadandó. Az átlátszóság megváltoztatása adott idő alatt, alapértelmezetten 400ms:

.fadeTo(időtartam, átlátszóság értéke);

Az idő nem csak ezredmásodpercben adható meg, hanem kulcsszavakkal is: slow (600ms) és fast (200ms), minél nagyobb az érték, annál lassabb az animáció:

.fadeTo('slow' vagy 'fast', átlátszóság értéke);

Opcionálisan átadható callback függvény is harmadik paraméterként - az animáció befejezése után fut le:

.fadeTo(időtartam, átlátszóság értéke, [callback függvény]);

Átadható easing függvény és callback függvény is (opcionális paraméterek) - az animáció befejezése után fut le:

.fadeTo(időtartam, átlátszóság értéke, [easing függvény], [callback függvény]);

Példa

A következő példában a fadeTo metódus segítségével a #hide gomb megnyomásakor a #test elem elrejtésre kerül az átlátszóság 0.5 értékre csökkentésével, a #show gomb megnyomásakor pedig megjelenik:

<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);
});

Lásd még

a fadeToggle metódus,
amely megváltoztatja az elemek átlátszóságát
a fadeIn metódus,
amely simán megjeleníti az elrejtett elemeket, azok átlátszatlanná tételével
a animate metódus,
amely animálja az elemek tulajdonságait