jQuery Alapok – Animáció

-

A jQuery Alapok című oktató sorozat segítségével bevezetést nyerhetünk a jQuery JavaScript program könyvtár használatába. Megtanulhatjuk a rendszer alap szintű használatát, valamint megtudhatjuk hogy miért ilyen hatékony.

jquery-alap-2

A jQuery animáció funkcióinak köszönhetően látványos mozgásokat, áttűnéseket hozhatunk létre pár sor kóddal. Nyugodtan kijelenthetjük, hogy nagy részben az animate() eljárásnak és társainak köszönhetően szerzett ekkora felhasználói tábort a keretrendszer.

A fő eljárás az animációk készítése során az animate(). Az eljárás és egy két CSS tulajdonság – érték pár segítségével számos dolgot animálhatunk. A gyakrabban használatos animációs módokhoz létrehoztak külön eljárásokat, mint a fadeIn()/fadeOut() vagya slideIn()/slideOut().

Alapszintű animáció – show(), hide(), toggle()

A show() és a hide() eljárás magukért beszélnek, megjelenítik, illetve elrejtik a kívánt elemet.

$(function() {
     var p = $("p");

     p.hide();
     p.show();
});

Ebben a formában, csak elrejtik az elemet, bármiféle animáció nélkül, azonban a függvénynek van egy idő paramétere, ahol megadhatjuk ezredmásodpercben az animáció lezajlásának idejét, természetesen a már sokszor használt callback függvényt itt is használhatjuk!

$(function() {
     var p = $("p");

     p.hide(2000);
     p.show(2000);
});

A harmadik említett eljárás a toggle(). A toggle tuljadonképpen egy kepcsoló, jelen esetben, ha az adott elem látszik, akkor elrejti, ha nem látszik akkor megjeleníti. A következő esetben a p elemek megjelennek:

$(function() {
     var p = $("p");

     p.hide(2000);
     p.toggle(2000);
});

Átfedés animáció – fadeIn(), fadeOut(), fadeToggle(), fadeTo()

A fadeIn() és a fadeOut() eljárás testvérpáros, hiszen az egyik a megjelenésért, míg a másik az eltűnésért felelős, egyébként ugyanúgy működnek. A fadeToggle() a fent taglalt szimpla toggle() eljrásához hasonlóan egy kapcsoló a látható és az elrejtett állapot között. Mind a három függvény a visszatérési érték mellett egy lefutási idő paraméterrel rendelkezik.

Az időértékeket ezredmásodpercben adhatjuk meg, vagy használhatjuk az alap értékeket, a “slow”-t (600), a “normal”-t (400), a “fast”-t (200).

$(function() {
     var div = $("div");

     div.fadeOut(2000);
     div.fadeIn(2000);
     div.fadeToggle(2000);
});

A fadeTo() eljárás használatához plusz egy paraméter szükséges, ami az átfedés mérete, 0-1-ig kell megadnunk azt az értéket, amennyi átfedést szeretnénk. Tehát a függvény nem teljesen elrejt, vagy megjelenít, csak egy bizonyos százalékig teszi.

$(function() {
     var div = $("div");

     div.fadeTo("2000", 0.4);
});

Csúszó animáció – slideDown(), slideUp(), slideToggle()

A slideDown() eljárás legördíti, vagyis megjeleníti az adott elemet, míg a slideUp() felgörgeti, vagyis elrejti. A slideToggle() pedig szintén a két állapot közötti kapcsoló.

$(function() {
     var div = $("div");

     $("button").click(function(){
        div.slideToggle();
     });
});

Animáció eljárás – animate()

Az animate() eljárás használata során a CSS tulajdonságokat kell használnunk. A függvény szintaxisa a következő:

.animate( properties [, duration ] [, easing ] [, complete ] );

Tehát az eljárás használatához 4 paramétert hívhatunk segítségül. Az első a tulajdonságok, amit objektumszerűen adhatunk meg, a második a hossz, a harmadik a dinamika, míg a negyedik a visszatérési érték. Egyszerű példával illusztrálva:

$(function() {
     $(".klikk-animate").click(function(){
          $(".animate").animate({
            opacity:'0.5',
            height:'200px',
            width:'200px'
          }, 2000);
      });
});

Ha több fajta dinamika/easing beállítást szeretnénk használni, akkor használnunk kell a jQueryUI-t!

Jól látható, hogy az animáció a CSS tulajdonságokra támaszkodik és azokat módosítja a megadott értékekre. A használható CSS tulajdonságok mindegyike felveheti a “hide”, “show” és “toggle” értéket. Ezekkel megjeleníteni, vagy elrejteni tudjuk a különböző animációkat. A toggle pedig a már megismert, jQuery esemény követő. A szám értékeket adhatunk meg relatívan a “+=” vagy “-=” karaktersorozatokkal, tehát ha egy értéket növelni szeretnénk 50-el, akkor a megadás a következő: left: ‘+=50’.

Animáció léptetés

A fenti példában egyszerre három tulajdonságot animáltunk, azonban megtehetjük azt is, hogy a tulajdonságokat egymás után módosítjuk. Ezzel a lehetőséggel nagyon sok különböző animáció típust hozhatunk létre. A jQuery intelligensen kezeli az események sorba állítását!

$(function() {
     $(".klikk-animate").click(function(){
          var div=$(".animate");
          div.animate({height:'400px',opacity:'0.5'},"slow");
          div.animate({width:'400px',opacity:'1'},"normal");
          div.animate({height:'100px',opacity:'0.5'},"slow");
          div.animate({width:'100px',opacity:'1'},"normal");
     });
});

A stop() eljárás

A stop() eljárást egy animációs probléma hívta életre, még pedig az, amikor az animációt kiváltó eseményt többször hajtjuk végre, gyorsan egymás után és az animáció beragad, vagyis ahányszor végrehajtottuk a kiváltó eseményt, az animáció annyiszor lejátszódik. Ha a stop() eljárást hozzáfűzzük az animációért felelős kódsorhoz, akkor amikor újra kiváltjuk az elindító eseményt az előző, folyamatban lévő eseményt megszakítja és elindítja újból az animációt.

$(function() {
     $(".klikk-animate").on("click", function() {
          $(".animate").stop().fadeToggle(1000);
     });
});

Összefoglalás – jQuery Alapok – Animáció

Az animate() eljárás segítségével, olyan látványos megoldásokat hozhatunk létre, amiket korábban csak Flash technikával. Számos kiegészítő, egyszerűsítő eljárást létrehoztak a tervezők – fadeIn(), slideIn() – hogy egyszerűsítsék a munkánkat.

A sorozat további részei

Szolgáltatások

Full-stack webfejlesztés

01.

Egyedi weboldalt szeretnél?

WordPress CMS-el fejlesztve megvalósítjuk elképzeléseid. Készítünk egy modern oldalt, amivel felveheted a versenyt a konkurenciával.

02.

Komplex webes ötleted van?

Teljes körű alkalmazásfejlesztési szolgáltatást nyújtunk, amennyiben van egy olyan ötleted, vagy terved, ami nem valósítható meg kész megoldásokkal.