Írásomban összeszedem, hogy miként is működik egy jQuery program és hogy mik a legalapvetőbb effekt utasítások, amiket használni érdemes és kell. Akik egyáltalán nincsenek tisztában a HTML kóddal és az alapvető Javascript nyelvvel, azok először ezeknek nézzenek utána, mert ahhoz, hogy az ember megértsen egy komplexebb nyelvet, jobb ha ismeri annak az alapjait. Persze azért nem kell az Assembly-vel kezdeni!

A Javascripttől eltérően a jQuery parancsok elég összetettek tudnak lenni, főleg mivel ezt a library-t azért hozták létre, hogy meggyorsítsa, megkönnyítse a webprogramozást, és hogy minél kevesebb sor megírásával lehessen létrehozni minél felhasználóbarátabb oldalakat. Minden parancs így néz ki:

$(DOM elem).valami();

• A $ jel a “jQuery” rövidítése, ez jelzi a JS számára, hogy itt most egy jQuery objektumról lesz szó. Ha mondjuk használtál már Ruby on Rails-t akkor ismerős lehet ez a fajta jelölés. Lényegében ennyi, de érdemes még tudni, hogy a $ helyettesíthető a jquery kiírásával, tehát: jquery(DOM elem).valami();
• A (DOM elem) az a HTML elem amire hivatkozol a jQuery parancsban. Ezen az elemen fog végrehajtódni a meghívott függvény
• A .valami(); a jQuery függvény, amely meghívásra kerül. Lehet ez a legegyszerűbb hide(), ami eltünteti a megnevezett elemet, vagy egy összetett AJAX hívás is.

Tulajdonképpen ez volt a legelrettentőbb rész. Érdemes tudni, hogy egy DOM elemhez több függvény is rendelhető, tehát a $(DOM elem).valami1().valami2(); is nagyon szépen fog működni; és ebben van az igazi potenciál. Most, hogy ezt megértettük nézzünk meg a legegyszerűbb függvényeket: az effekteket.

Effekt függvények

A beépített effekt függvények nagy része a következő felépítéssel működik:

$(elem).effekt([speed, callback]);

• A függvények paraméterei opcionálisak, de közülük a speed, azaz sebesség az amit legtöbbször használni kell. Meg lehet adni ezt ‘slow’, ‘normal’ és ‘fast’ értékeken túl milliszekundumban is (1000 ms = 1 másodperc). Ez lesz az az időtartam, ami alatt a függvény végrehajtódik; ez a lefutási idő.
• A callback, vagyis visszahívás paraméterben megadható, hogy mi történjen miután lefutott a függvény. Például amint véget ér az adott parancs, visszakapjuk egy alert()-ben a számolás értékeit.

Volt, nincs (show(), hide(), toggle())

Szerencsére a jQuery függvényei többsége nevében hordozza a funkcióját is, ezért ha nem is ismered a függvényt, nagyon gyorsan rá lehet jönni a működésére. Így van ez a show() és a hide() parancsoknál is: míg előbbi megjelenít egy rejtett elemet, utóbbi eltünteti a célelemét. Mindkét függvény használható speed és callback paraméterrel és nélküle, de fontos megjegyezni, hogy a sebesség paraméter nélkül csak megjelenik/eltűnik a kiválasztott DOM elem; megadásakor azonban egy kis animációt kap.

A toggle() egy kicsiben eltér a show() és hide() függvényketől, ugyanis ez tulajdonképpen a kettő kombinációja. Paramétereinek megadhatjuk a már ismert speed és callback paramétereket, de egy kifejezést is (pl. osztas++ % 2 == 0, azaz ha az “osztas” változó kettővel történő maradékos osztásának eredménye 0), amely teljesülésekor végrehajtódik az utasítás.

Lássunk is egy rövid példát. HTML kód:

Jelenítsd meg (show)
Tüntesd el (hide)
Jelenítsd meg és tüntesd el (toggle)

jQuery kód:

$('a#show').click(function() {
  $('p.pelda_1').show();
});
$('a#hide').click(function() {
  $('p.pelda_1').hide();
});
$('a#toggle').click(function() {
  $('p.pelda_1').toggle('slow');
});

A kis programunk mindössze annyit csinál, hogy a megadott linkekre való kattintáshoz  (click() függvény [erről egy későbbi postban]) rendel show, hide és toggle effekteket. Itt nézheted meg működés közben a demot. A show és hide nem kapott speed paramétert, míg a toggle-re tettem, csak azért, hogy lássátok, hogy milyen is az.

Csúszkálás (slideDown(), slideUp(), slideToggle())

A slide függvények nagyon hasonlóan működnek a show, hide függvényekhez, lényegében annyiban különböznek, hogy míg az előbbiek a speed megadásával függőleges és vízszintes irányba animálták a függvényt, a slide függvények csak függőleges irányba teszik ezt. Nem ér meg külön példát, a jQuery dokumentációban van róluk bőven leírás, példával.

Eltűnés/feltűnés (fadeIn(), fadeOut(), fadeToggle())

Eljutottunk egyik kedvencemhez: a fadeIn(), fadeOut(), fadeTo() ugyanis az a függvényhármas, amelyiket a legnagyobb előszeretettel használom. Szerintem baromi jól tud kinézni egy jó helyre rakott, szépen animálódó üzenet a usernek, főleg ha az ugyanilyen szépen be is csukódik utána. A fadeTo() a paraméterben kapott értékig csökkenti a függvény láthatóságát, míg a fadeIn() és fadeOut() a megadott sebességgel csökkenti az elem opacity CSS értékét, majd mikor ez elért a 0-hoz, rádob egy “display: none”-t, tehát eltűnteti teljesen, hogy ne foglalja a helyet. Na ez gondokat okozhat néha.

A fade effektek egyik fontos tulajdonsága, hogy míg az eddig megismert függvények folyamatosan “nyitják ki” a célobjektumot, ezzel lentebb tolva/fentebb húzva az alatta és körülötte lévő elemeket; a fade az animáció befejeztével és kezdetekor a DOM elem elfoglalja a megfelelő méretű helyét és így tűnik el(ő). Ez azt jelenti, hogy ha egy oldal közepén lévő elemet animálsz meg fade-del, akkor az animációs idő egy időpillanatában ugrani fog egyet az oldal magassága/szélessége, erre pedig figyelni kell mert zavaró lehet!

A fade-hez készített példában az eltüntetendő elem után raktam egy másikat, hogy lássátok miről beszéltem pontosan. Megoldásként vagy azt javaslom, hogy olyan elemeknél használjátok a függvényt, amik nincsenek körülvéve sok másik elemmel, vagy CSS-sel pozicionáljátok be az elemet egy felsőbb rétegre.

A központi effekt (animate() és stop())

Az összes eddig felsorolt effekt függvény visszavezethető egy központi animációs függvényre, az animate()-re. Ez az amivel mi magunk is létrehozhatunk hasonló mozgásokat a DOM elemekre, csupán egy kis CSS tudás kell hozzá. Egyszerűen az animate() paraméterei között meg kell adnunk, hogy mely CSS tulajdonságokat változtassa meg a függvényünk; például a 400px széles és magas <p> csökkenjen 200×200-ra, a láthatósága pedig legyen fele:

$('a#animald').click(function() {
  $('p.pelda_3').animate({width: "200px", height: "200px", opacity: 0.5}, 1500);
});

Itt a kipróbálható példa. Az animate() az egyik legfontosabb effekt, hiszen ezzel nagyon komplex animációkat hozhatunk létre, de vannak korlátok; a háttérképet például csak vízszintesen lehet animálni, ami kicsit idegesítő tud lenni, szerencsére azonban van erre egy plugin.

Feltűnhet, hogy a példában alkalmaztam a stop() függvényt az animate() előtt (a függvények összefűzhetőek, mint már említettem!); ez annyit csinál, hogy megállítja az éppen zajló animate()-et, így adva szabad utat a következő animáló függvénynek. A stop()-ról van egy egészen jó példa a jQuery dokumentációban.

Mára ennyi. Következő alkalommal megnézünk egy-két fontos esemény-függvényt (pl. rákattintás, fókuszba kerülő elemek) és néhány selectort (ezekkel tudunk bizonyos elemekre hivatkozni és kezelni jobban a DOM elemeket). Addig is gyakoroljatok ezekkel! Ha valami nem világos, nyugodtan kérdezzetek a hozzászólásoknál!