Most már eléggé jól kezdünk megbarátkozni a jQuery struktúrájával, használatával... lássuk, milyen látványos funkciókat (effekteket) tesz számunkra könnyen elérhetővé ez a kis csomag. Persze nem fogom itt mindet teljes mélységében és összes lehetőségével bemutatni, de kellemes kis ízelítőket láthattok majd...

Kezdetnek jöjjenek a - már tapasztalt - szépen fokozatosan előtűnő elemeink vezérléséhez szükséges függvények. Ezek a következők: fadeIn, fadeOut, FadeTo, és fadeToggle. Nem gondoltad volna, hogy ennyi van, mi? :D

fadeIn:

Röviden: egy láthatatlan teljesen áttetsző objektumunkat szépen fokozatosan megjelenít adott idő alatt. Persze ennek az időnek van alapértelmezett értéke is, valamint megadhatunk egy általunk választottat is bementi paraméterként, ahogy azt már láthattuk a korábbiakban is. Szinte minden effekt esetében megadható egy "complete" függvény is, ami az animáció befejeződésekor kerül futtatásra. Lássuk ezeket egy példában:

$('#box').fadeIn(1000, function(){
    alert("kész");
});

Gondolom, nem túlzottan nehéz megfejteni a kódot... van egy "box" id-jű elemünk, ami 1 másodperc lefutása alatt fog szép fokozatosan előtűnni, majd ha már teljesen láthatóvá vált, a böngészőnk feldob egy üzenetet "kész" szöveggel.

fadeOut:

Itt nem fogok túlzottan sokat rizsázni... ugyanaz a működtetés játszik, mint az előzőnél, csak ennek az a feladata, hogy eltüntesse a kijelölt elemet. Példát ide nem is írok... minek... :D

fadeTo:

Na, ez azért már trükkösebb :) Annyival bővül a dolog, hogy akármilyen láthatósági állapotban is van az objektumunk, mi a megadott értékű áttetszőséget szeretnénk elérni. A dolog annyiban változik, hogy az idő után megadjuk az opacitás értékét... és azután jön a "complete" függvény, ha van:

$('#box').fadeTo(1000, 0.5);

Tehát itt most egy félig áttetsző objektumot kell kapnunk. Ha minden igaz, ennek I.Explorerben is működnie kell (ahol eredetileg az "opacity" értékek 0 és 100 között mozognak).

fadeToggle:

Külön példát most ehhez sem fogok írni. Ez gyakorlatilag az első kettő pepitában. Egyszerűen váltogatódnak az állapotok: ha az elemünk eredetileg látható, akkor egy "fadeOut" hajtódik végre, ha pedig láthatatlan, akkor egy "fadeIn".

Na, akkor ezekről ennyit :) Nagyon remélem, hogy senki sem várja azt a bekezdés címe miatt, hogy bemutassam a "fadeX"-et :D Nézzünk még további lehetőségeket megjelenítéshez és elrejtéshez.. a "show" és "hide" effektek.

show:

Egész pofás kis opció elemek előbukkanásához. A rejtett kis objektumunk ennek hatására egy olyan "fadeIn" hatás kíséretében előugrik, azaz a mérete nő meg gyakorlatilag... egy kis pontból az eredeti méretére növekszik. A használata ugyanolyan, mint az előzőknek: megadhatunk egy időtartamot, akár egy eseményt is, ami a végrehajtás után be kell hogy következzen.

$('#box').show(500);

Lényegében ennyi szükséges csak egy dobozka stílusos előcsalogatásához. Abba jobb bele se gondolni, hogy anno milyen bonyesz lett volna teljesen leprogramoznunk magunknak egy ilyet :)

hide:

Gondolom, nem kell túlragoznom: ugyanazt csinálja, csak épp fordítva. A látható elemünket szépen összenyomja és mellette fokozatosan áttetszővé teszi. Az alkalmazása ugyanolyan formában működik.

Mellékelek ide is egy kis letölthető példát... Van benne egy piros doboz, amiről a benne lévő szöveg is sok mindent elárul: "piros doboz" :D És van 7 darab gomb, amikkel a fade és show-hide effekteket lehet próbálgatni, illetve tanulmányozni a működtetésüket. Itt le is töltheted: KLIKK