Folytassuk tovább a spécibb effektek áttekintését. Ha már a feltűnő-eltűnő hatásokat elemezgettük utoljára, akkor érdemes a még ehhez a témához tartozó függvényeken át vinni tovább a fonalat. Ezek lesznek a "slideDown", a "slideUp" és a "slideToggle". Azt gondolom, már mindenki sejti, hogy itt csúszkálni fognak az objektumok :)

slideDown:

Ahogy eddig is kezdtük: van egy láthatatlan dobozunk. Ennek a hatására pedig a doboz szépen "lenyílik". Ezáltal például ideális lehetőség egy látványosabb lenyíló menü készítéséhez...

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

Igen... az a szám azt jelenti, hogy mennyi idő alatt fusson le a dolog... ugyanúgy, mint az eddigi effekteknél :) és ha akarunk, itt is megadhatunk egy "complete" függvényt második paraméterként.

slideUp:

Na, ide sem fogok példát írni... Hogy miért? :D Mert ugyanaz, csak más a függvény neve. Ennek bekövetkeztekor a látható elemünk szépen felcsúszik... azaz pontosabban "felcsukódik" (az elnevezésből sokan arra számíthatnak, hogy az elem pozíciója változik, de igazából a magassága nő és csökken).

slideToggle:

A "fadeToggle" esetéből kiindulva ennek az eredményét sem túl bonyolult megjósolni: váltogatja az előző két hatást. Ha látható a doboz, akkor összecsukja azt, ellenkező esetben pedig lenyílik... pofon egyszerű :) 

Opciók:

Mielőtt továbblépnénk, most teszünk egy minimális kitérőt... Eddigi az effekteket úgy alkalmaztuk, hogy a függvény végén a zárójelbe beírtuk a fontos paramétereket, amik befolyásolják a hatás működését... általában ez ugye két paraméter volt: az időtartam hossza, illetve a "complete" függvény (ezek a legfontosabb beállítási lehetőségek). Viszont, ha kicsit mélyebben szeretnénk belenyúlni az effektünk beállításaiba, akkor  használhatunk bemenő paraméterként objektumokat is, amiket opciók beállításához alkalmazunk... 

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

Emlékszünk, ugye...? Ez volt az első effektünk bemutatása bemenő paraméterek megadásával. Most ha ugyanezt a hatást szeretnénk elérni úgy, hogy felsoroljuk az opciókat, akkor így kell megírnunk a kódot:

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

Formailag így néz ki a dolog... az opciókat tartalmazó objektum elemeinek felsorolását kapcsos zárójelek közé írjuk, vesszővel elválasztva, és minden elem esetében először írjuk a tulajdonság nevét, majd kettőspont után pedig az értékét (ahogy a példában is... a "duration" értéke 1000 lesz, a "complete" értéke pedig egy függvény, ami feldobja a "kész" feliratú üzenetet).

$('#box').fadeIn({
    duration:2500,
    easing:'swing',
    step:function(){
        $('#box').text($('#box').css('opacity'));
    },
    complete:function(){
        alert("kész");
    }
});

Itt máris kettővel több tulajdonságát lőttük be a "fadeIn" effektnek, mint eddig. Ezeket is gyakran használják. A "step" például szintén hasznos (mint a "complete"): megmondhatjuk, hogy mi történjen két lépés között, amíg a hatás zajlik. Itt most annyit tesz a program, hogy a "text" függvénnyel beleíratjuk a "box" elemünkbe a "box" jelenlegi áttetszőségének értékét. Ekkor futás közben azt látjuk, hogy 0-tól 0,999...-ig pörögnek benne a számok (mert ugye a "fadeIn" teljesen áttetszőből teljesen láthatóvá teszi az elemet). 

Easing:

Az előző példánál biztos felmerült a kérdés: "na de mi a f*om az az easing? Na, most erre térünk rá :) Egy olyan cucc, ami még jobban feldobja az animált hatásainkat. Egy nagyon pofás kis csillapodást ad az effektünknek.  Többféle fajtája van ennek a csillapításnak, egyik személyes kedvencem az "easeOutElastic", ami az effekt végén amolyan rugalmas hatást kelt (például egy "slideX" függvénynél, "fadeX" esetében egy kis villogás-félét tapasztalunk).

$('#box').slideDown({
    duration:1000,
    easing:'easeOutElastic'
});

Ezt a látványt biztos sokan csipázni fogják :) A "rugózáson" kívül még van, ami belassítja egy részen a hatást, vagy az elején ad neki egy olyan "rozoga" redőny feelinget, stb... Ha meg akarjátok nézni a különböző fajtáit, ezen a lapon tesztelgethetitek őket: http://matthewlein.com/experiments/easing.html. 

Animate:

A talán legösszetettebb és ezáltal legkirályabb effekt. Az eddigi összes effekt könnyedén előállítható ezzel és persze továbbiak is. Kettő darab objektumot fogad kötelező bemenő paraméterként: tulajdonságok és opciók. Az utóbbiba ugyanazok tartoznak, mint amikkel eddig is találkoztunk (duration, step, complete, stb.), az elsőhöz pedig CSS tulajdonságoknak adunk értéket, amit el kell érniük (vagy amivel változnia kell) a folyamat lefutása alatt. Ez lehet áttetszőség, szélesség-magasság, pozíció, stb. Ezek adott idő alatti párhuzamos változása alkotja majd a spéci animációt.

$('#box').animate({
    opacity:1,
    left:600,
    height:500
},{
    duration:1000,
    complete:function(){
       alert("vége");
    }
});

Van egy "box"-unk, ami látható (display:block), viszont teljesen áttetsző (opacity:0), és abszolút pozícióval bír (mert a "left" attribútum csak így játszik). Ennek az effektnek a végrehajtásakor az elem szépen előtűnik a homályból, közben megnő a magassága is (500 pixelre) és elmozdul jobbra (600 pixelig). Ez mind 1 másodperc alatt zajlik le (1000 ms), majd a végén jön a szokásos "vége" üzenet. Még egy megjegyzésképpen hozzáteszem... ha nem a cél-értéket akarjuk megadni, hanem az a fontos, hogy mennyivel változzon az aktuálishoz képest, akkor így írjuk: left:'+=50' 
ha pedig mondjuk csökkenteni szeretnénk, az úgy működik, hogy negatív számmal növeljük, azaz: left:'+=-50'

Hát ezek is megvannak :) most már nagyon komoly szinten tudunk királykodni a látványos effektjeinkkel. Könnyen és egyszerűen tele tudjuk dobálni oldalainkat pofás dinamikus kis elemekkel (persze azért igyekezzünk nem túlzásba vinni... csak stílusosan).

A fentieket szemléltető példákat itt is nyújtok a biztonság kedvéért. Gombokkal vezérelhető "slide" és "animate" effektek paraméterekkel, opciókkal, csillapodással... ami csak kell. A fájlt itt le is töltheted: KLIKK

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