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:

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

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

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

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

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

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

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

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

Lásd még