Animációs segítség a jQuery kezdőknek, javascript
Ebben a cikkben megnézzük az animáció alapjait a jQuery-ban. így összetett oldalak kifejlesztéséhez használhatja. Az animáció az interaktív webdesign elemek alapvető funkciója.
A weboldal tervezés fontos szerepet játszik a látogatók vonzerejének folyamatos használatában. Az interaktív tervezés több figyelmet vonz, mint a szokásos statikus kialakítás.
Az animáció praktikus használata a jQuery-ban
A jQuery-t széles körben használják interaktív elemek, például csúszkák, menük, scrollers és mások fejlesztésére. Mielőtt közvetlenül az animációhoz megyünk, javasoljuk, hogy nézze meg az alábbi gyakorlati megvalósítási példákat, amelyek bemutatják a jQuery animáció erejét.
- Oldalsó csúszás görgetéskor;
- Képkeretek egyesítése a jQuery használatával;
- Animáció "Éjszakai álmok";
- Animáció a függöny megnyitásával jQuery-rel;
- Hozzon létre úszó navigációs menüt a jQuery használatával.
Ön, mint kezdő, nem tudja azonnal megismételni a példákban közölteket. Ezért tovább fogjuk érteni a jQuery animáció alapjait a kezdők szempontjából.
Töltse le a forráskódot
Bevezetés az animáció alapjaiból a jQuery-ban
Csak elrejthetjük / megjeleníthetjük az elemet a CSS attribútumok megjelenítésével vagy láthatóságával. A jQuery leegyszerűsíti a folyamatot két elrejtési és megjelenítése funkcióval. Vegye figyelembe a következő kódot a HTML elem megjelenítéséhez és elrejtéséhez.
Ideális esetben le kell simítanunk az elemek elrejtését és megjelenését, animációt használva a felhasználói élmény javítása érdekében. A jQuery két beépített módszert kínál elemek megjelenítésére és elrejtésére egyszerű animációkkal.
- Feloldás - felismeri a HTML elem fokozatos feloldódásának folyamatát, megváltoztatja az áttetszőség tulajdonságát;
- Slip - megvalósítja a HTML elem fokozatos bővítését / tömörítését, megváltoztatja annak magasságát.
Lássuk, hogyan alkalmazzuk ezeket a módszereket az elemek megjelenítéséhez és elrejtéséhez az animáció hatásával.
A jQuery magába foglalja az animáció komplexitását azáltal, hogy beépített módszereket kínál különböző webes tervezési feladatok megoldására.
oldódás
A feloldódás általában a fadeIn és fadeOut függvények alkalmazásával valósul meg. Az elem opacitás tulajdonságának értékét a fadeIn függvény növeli és a fadeOut funkcióval csökkentik. A feloldódás időintervallumát is átadhatjuk, amint az a következő példában látható:
csúszás
Az animáció hatásának eléréséhez a csúszási funkciók megváltoztatják az elem magasságát, az átlátszóság helyett. A funkciók hasonló szintaxissal rendelkeznek, és a feloldási függvényekhez hasonlóan működnek.
Ebben az esetben a slideUp elrejtésre használható, és a slideDown elemek megjelenítésére szolgál. A következő kód mutatja a csúszási funkciók fő módját:
Az jQuery Animate használatának megkezdése
A legtöbb kezdõ úgy véli, hogy az animáció fejlesztése meglehetõsen nehéz feladat. Ez feltétlenül nehéz, ha tiszta lapokkal indulsz. A jQuery minden összetettséget magába foglal, egyetlen funkcióval, amely mindenféle animációt vezérel.
Általában az animáció a CSS attribútumok értékeinek módosításával jön létre. Miután elsajátítottad a jQuery funkció animációt. komplex animáció létrehozása egyszerű feladat lesz. Kezdjük azzal, hogy megvizsgáljuk az animációs függvény sablont:
Ez a kód illusztrálja az animált funkció használatát. Az első paraméter tartalmazza az összes CSS tulajdonságot és értéket.
A következő opcionális paraméter határozza meg az animáció időtartamát. A harmadik paraméter meghatározza a nyújtás módját (az animáció típusát), és az utolsó paraméter megadja az anonim funkciót, amelyet az animáció véget ér.
Miután megnézzük a használati mintát, folytathatjuk a jQuery animációval valami praktikus létrehozást.
A kép egyes részeinek animálása
Ebben a részben megnézzük, hogyan jeleníthet meg egy képet az animáció egyedi részeihez való alkalmazásával. Először is meg kell osztanunk a képet több kicsire. Használhatja ezt a cikket a képmegosztás technikájára: "JQuery és PHP használatával egy puzzle létrehozása".
Itt van a kép, amelyet animációhoz használunk:
A cikk forráskódjában 12 kép található az elkülönítés után. Minden kép mérete 150 x 150 pixel. Két részből áll 6 darab. Minden sor mind a 6 képét az oldal jobb sarkában találja meg, az alábbi kódot használva:
Itt 12 kép van elrendezve két sorban, két CSS osztályban img_item és img_item2. Most nézzük meg a CSS-t a kép pozícionálásához:
A fenti kód szerint az egyes sorok minden képét rejtve rejtjük el és egymás tetejére helyezik, abszolút pozícionálással. Most megnézhetjük a jQuery kódot animációval létrehozott kép létrehozásához:
Tehát két kiválasztó van kiválasztva az img_item és img_item2 osztályok elemeihez. Ezután alkalmazzuk az animate függvényt az egyes elemekre, hogy az opacitás tulajdonság értékét simán változtassuk 1-re, és a bal oldali tulajdonságot a kép előző részének pozíciójához képest megváltoztatjuk. Valójában az animáció egyidejűleg alkalmazásra kerül a kép minden részére, és az eredmény így van:
Hasonló hatásokat használhatunk a csúszkákon, képernyővédőkön, képgalériákon belül. Itt bemutatjuk az előző példát.
Most már ismeri az animációs funkcióval való együttműködés alapjait. Vessünk egy mélyebb pillantást az animáció szempontjaira, különösen részletesebb beállításokra.
Fejlett hatások kifejlesztése
Az előző példában az animációt minden elemre alkalmazták közvetlenül az oldal betöltése után. Néha azonban hatásokat kell alkalmazni egymás után, amikor az egyes elemek animációja az előző elem animációjának befejezése után kezdődik. Próbáljuk meg ugyanazt a képet betölteni egy sor hatások segítségével. Kezdjük a HTML-vel:
Az egyetlen változat, mint az előző változat, egy CSS osztály használata két sor helyett. Ez a megvalósítás generálja a sorokat a jQuery kód használatával, ahelyett, hogy keményen kódolná a CSS osztályokat.
A példa végrehajtására szolgáló CSS ugyanaz lesz, mint az előző esetben. Most nézze meg a jQuery kódot, hogy hozzon létre egy sor hatás:
Az oldal betöltése után az összes képelemet az img_item osztály használatával választjuk ki. Ezután átadjuk ezeket az elemeket az animateImg függvénynek, hogy létrehozzuk az animációt. A következő kód mutatja be az animateImg függvény végrehajtását:
Az animateImg függvény négy paramétert használ. Az első paraméter a képelemek gyűjteményét határozza meg. A második és a harmadik paraméter határozza meg a bal és a felső tulajdonságok értékét a pozícionáláshoz a képernyőn.
Kezdetben a két érték 0-ra van állítva, hogy a képet a képernyő bal felső sarkában helyezze el. A negyedik paraméter a kép szekvenciaszáma sorok sorba rendezéséhez.
Először ellenőrizzük, hogy az elemek tömbje elérte-e az állapotot, ha. Ezután válassza ki a tömb képét a megadott sorszám szerint.
Ezt követően az animációs funkciót 1500 milliszekundumra hívjuk. Végül növeljük a sorszámot, hogy kiválasszuk a következő elemet a tömbből.
Ebben a példában két sorban 6 kép van. Ezért az osztás szerinti modulus alapján osztjuk fel a megosztást annak ellenőrzésére, hogy elérjük-e a sorozat végét. Ebben az esetben növeljük a következő kép csúcsértékét a sorok dinamikus létrehozásához.
Végül rekurzív módon hívjuk meg az animateImg függvényt. Az összes elem átvétele és teljes kép létrehozása. Az alábbi kép mutatja a hatások sorrendjét a cselekvésben.
Itt megtalálja az előző példa bemutatását.
Amint láthatja, az animált funkciót használta a következő elem animációjának végrehajtására. Ezért az animáció minden egyes szakasza az előző befejezése után kezdődik. Hasonló funkciókat tudunk elérni az animált sor funkciók használatával.
Hatás láncok
Eddig mindegyik elemhez egy effektust hoztunk létre. A bonyolultabb feladatok során kombinálnunk kell több hatással a lánc egyes elemeire. Tehát változtassuk meg az előző példát a hatásláncok hozzáadásával:
Létrehozhatunk hatásláncokat egy elemhez úgy, hogy többször megnevezzük az animált funkciót pontjelöléssel. Az előző példában egy másik animációt indítunk az első után, az .animate függvény használatával. Számos effektust hozzáadhatunk ehhez a technikához. Létező hatás láncolata van.
következtetés
Ebben a cikkben megvizsgáltuk, hogyan készítsünk animációkat a jQuery animate funkció használatával. Különféle gyakorlati módszereket vizsgáltunk arra, hogy animációt alkalmazzunk a kép egyes részein, hogy teljes képet alkossunk.
Most tovább folytathatja a javított animációs módszerek tanulmányozását a jQuery listában felsorolt listán:
- Hatás sorok;
- Az animációs folyamat kezelése;
- Animációs lépések kezelése;
A "JQuery Animációval való Kezdet útmutatójának" fordítását az A-tól Z-ig terjedő Saitostroenie projekt barátságos csapata készítette el.