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