Një prekje e vogël e animacionit mund të ndriçojë çdo ndërfaqe të mërzitshme. Në artikullin e sotëm, do të mësoni se si ta përdorni siç duhet jQuery.

Prezantimi

Animacioni është një koncept që zakonisht shkakton një reagim të paqartë te njerëzit. Disa e konsiderojnë të dobishme, të tjerë e dënojnë përdorimin e tepërt të saj. Pavarësisht kësaj, animacioni i përdorur siç duhet shpesh mund të zbukurojë ndërfaqen e përdoruesit dhe ta bëjë atë të duket më i pastër dhe më i gjallë. Në artikullin e sotëm, ne do të hedhim një vështrim të shpejtë në bazat e jQuery, më pas do të mësojmë se si të krijojmë animacionin tonë të parë, do të mësojmë se si të ndërtojmë efekte të ndryshme, dhe më pas do të krijojmë një animacion që mund të përdoret në projekte reale.

Hapi 1 Bazat e jQuery

jQuery është një bibliotekë JavaScript që synon të ndihmojë një zhvillues të krijojë faqe interneti të pasura, interaktive dhe ndërfaqe përdoruesi duke përdorur sa më pak kod që të jetë e mundur.

Një linjë tipike kodi duket si kjo:

$(Elementi DOM).diçka();

Le të zbërthejmë secilën pjesë:

• $ - Shkurtim për objekt jQuery. Nëse jeni duke përdorur korniza të shumta në të njëjtën faqe, përdorni stenografinë jQuery në vend të shenjës $: jQuery(DOM Element).something();
• (element DOM)– Elementi me të cilin do të bësh diçka. Ky është një nga karakteristikat kryesore jQuery. Ju mund të përdorni përzgjedhësit CSS për të marrë elementi i dëshiruar. Çdo përzgjedhës që funksionon në një skedar CSS mund të përdoret këtu. ID, klasa, pseudo-klasa, çfarëdo.
• .diçka ()– Çfarë doni të bëni me elementin e marrë. Kjo mund të jetë çdo gjë nga thjesht fshehja e një elementi deri te bërja e një kërkese AJAX te një mbajtës ngjarjesh.

Sot do të shikojmë vetëm animacionin dhe efektet që lidhen me funksionalitetin e tij.

Hapi 2 Përdorni efektet e integruara

jQuery ofron nje numer i madh i metoda të integruara që mund t'i përdorni menjëherë jashtë kutisë. Këto janë metoda për shfaqjen/fshehjen e elementeve, me variacione të ndryshme duke përfshirë rrëshqitjen e elementit dhe ndryshimin e transparencës së tij. Ju gjithashtu mund të përdorni një sërë metodash ndërroj, të cilat ndryshojnë dukshmërinë e elementit.

Përpara se të shikojmë secilën nga këto metoda, hidhini një sy formatit bazë të thirrjes për secilën metodë:

$("#element").efekt();

Më lart është paradigma bazë e jQuery, së pari marrim element i nevojshëm, duke përdorur përzgjedhësit CSS. Më pas, ne thjesht thërrasim ndonjë nga metodat e integruara.

Megjithëse shumica e metodave mund të thirren pa parametra, shpesh është e nevojshme të personalizohet funksionaliteti i tyre. Secila prej metodave merr të paktën dy parametra: shpejtësia dhe kthimi i thirrjes.

shpejtësia Përcakton kohëzgjatjen e animacionit në sekonda. Ju mund të kaloni si vlerë një prej fjalë kyçe: i ngadalshëm, normal ose i shpejtë; ose vendosni kohën në milisekonda.

kthimi i thirrjesështë një funksion që ekzekutohet pas përfundimit të animacionit. Mund ta përdorni për çdo gjë si për të bërë një telefonatë AJAX në sfond, për të përditësuar një pjesë ndërfaqja e përdoruesit edhe me shume. Ju jeni të kufizuar vetëm nga imagjinata juaj.

• shfaqje/fshehin– Metodat për shfaqjen dhe fshehjen e një elementi. Ata pranojnë shpejtësinë dhe thirrjen si parametra.
• ndërroj– Një metodë që manipulon shfaqjen e një elementi, në varësi të gjendja e tanishme element. Kjo do të thotë, nëse është e fshehur, e shfaq atë dhe anasjelltas. Përdor metodat e shfaqjes dhe fshehjes.
• rrëshqitje poshtë/rrëshqitjeUp– Metoda mjaft të dukshme. Duke ndryshuar lartësinë e një elementi, krijohet një animacion rrëshqitës që tregon ose fsheh elementin.
• rrëshqitjeToggle- Pothuajse e njëjtë me metodën e ndërrimit, përveçse përdor metodat rrëshqitje/rrëshqitje për të shfaqur/fshehur elementin.
• zbehet në/shuhem– Ndryshimi i transparencës së një elementi për të krijuar një efekt zbehje.
• fadeTo– Ndryshon transparencën e elementit sipas vlerës së kaluar. Siç mund ta merrni me mend, kërkon një parametër shtesë të opacitetit, ku është 0 transparencë të plotë, dhe 1 është errësirë ​​e plotë.

Si një funksionalitet shtesë, metoda ndërroj, mund të marrë si parametër një shprehje që vendos nëse elementi do të shfaqet apo do të fshihet.

Për shembull, nëse dëshironi të ndërroni vetëm artikujt e listës që kanë klasën efekt, kodi juaj do të duket si ky:

$("li").toggle($(this).hasClass("efekt"));

Me fjalë të tjera, funksioni ndërroj teston shprehjen që i është dhënë si parametër dhe nëse është e vërtetë, ndryshon dukshmërinë e elementit. Shprehja që kaluam në shembull kontrollon nëse elementi ka një klasë të caktuar.

Hapi 3 Krijoni animacionin tuaj

Shumë shpesh, metodat e integruara nuk i përshtaten nevojave tuaja, në këtë rast me shumë mundësi do të dëshironi të krijoni efektet tuaja. Me jQuery ju mund ta bëni këtë lehtësisht.

Për të krijuar një efekt animacioni të personalizuar, do t'ju duhet një metodë gjallëroj. Duket kështu:

$("#somelement").animate((vetia: vlera), );

Metoda gjallëroj mjaft e ngjashme me çdo metodë tjetër në atë që përdoret saktësisht në të njëjtën mënyrë. Marrim elementin dhe më pas i kalojmë disa parametra. Parametrat e pranuar janë ato në të cilat është metoda gjallëroj të ndryshme nga efektet e gatshme.

Parametrat e shpejtësisë dhe kthimit të thirrjes kryejnë të njëjtat funksione si në metodat e mëparshme. Një objekt me veti që përbëhet nga një numër i caktuar çiftesh çelësi/vlere është ajo që e bën këtë metodë unike. Ju kaloni në çdo pronë që dëshironi të animoni së bashku me rezultatin përfundimtar. Për shembull, le të themi se dëshironi të animoni gjerësinë e një elementi për të ndryshuar në 90% të vlerës së tij aktuale. Kjo mund të bëhet si kjo:

$("#somelement").animate((width: "90%"), 350, function()( alarm ("Animacioni ka mbaruar ekzekutimin."); ));

Shembulli i kodit të mësipërm animon një ndryshim 90% të gjerësisë dhe më pas shfaq një mesazh që animacioni është i përfunduar.

Vini re se nuk jeni të kufizuar në sasi. Ju mund të animoni një grup të madh karakteristikash, duke përfshirë transparencën, kufijtë, mbushjen, kufijtë, madhësitë e shkronjave. Metoda gjallëroj, është gjithashtu i përshtatshëm sepse mund të punojë me çdo njësi matëse. Piksele, ems, përqindje - gjithçka funksionon. Pra, edhe shembulli i kodit të turbullt më poshtë do të funksionojë. E vërteta nuk do të duket shumë e qartë.

$("#somelement").animate(( gjerësia: "90%" Madhësia e shkronjave: "14em", lartësia: "183px", opacity: 0.8, marginTop: "2cm", margjina majtas: "0.3in", kufiriPoshtë: "30mm ", ), 350, function()(alarm ("Animacioni ka përfunduar ekzekutimin.");));

Kur specifikoni një veti me shumë fjalë, ajo shkruhet pa vizë dhe shkronja e parë e fjalës së dytë duhet të shkruhet me shkronja të mëdha. Ky rekord ndryshon dukshëm nga zakonisht sintaksë css prandaj sigurohuni që ta mbani mend atë. Për shembull, pronë maja e kufirit, duhet të shkruhet kufiriTop.

shënim: jQuery ju lejon vetëm të animoni vlerat numerike të vetive. Kjo do të thotë që nuk do të jeni në gjendje të animoni vetitë e ngjyrave duke përdorur vetëm jQuery. Por nuk është gjithçka keq. Me pak ndihmë nga jQuery UI, mund të shtoni animacion me ngjyra shumë lehtë.

Hapi 4 Rregullimi i efektit

Nëse shikoni efektin e thjeshtë në faqen demo, mund të vëreni një gabim të vogël. Zhvendosja e miut mbi një element disa herë rezulton në një radhë të gjatë të përsëritur efektet e animacionit. Rezultati është një efekt i pakëndshëm, shtrëngues.

Mënyra më e lehtë për të zgjidhur këtë problem është përdorimi i metodës ndaloni, pak para se të fillojë animacioni. Kjo metodë pastron mirë radhën dhe animacioni funksionon normalisht.

Për shembull, ky është kodi juaj i rregullt:

$("#someelement") .hover(function() ( $(this).animate(( lart: 20 ), "shpejt"); ), funksion() ($(this).animate(( lart: 0 ) , "i shpejtë");));

Duke përdorur metodën ndaloni për të parandaluar përsëritjen e panevojshme të animacionit, tuaj kod i ri do të duket kështu:

$("#someelement") .hover(function() ( $(this).stop().animate(( lartë: 20 ), "shpejt"); ), funksion() ($(this).stop() .animate (( krye: 0 ), "shpejt"); ));

Shumë e thjeshtë, apo jo? Por kjo metodë ka një problem të vogël. Lëvizjet e shpejta nuk çojnë në një efekt të përsëritur, por ju duhet të paguani për këtë me animacion jo të plotë. Nëse dëshironi ta zgjidhni plotësisht këtë problem, do t'ju duhet një shtojcë si hoverFlow.

Hapi 5. Shtimi i realizmit - Lehtësimi

Nëse dëshironi të shtoni pak më shumë realizëm, do t'ju duhet një kontroll shtesë mbi shpejtësinë me të cilën shfaqet animacioni. Këtu vjen në ndihmë lehtësimi. Lehtësim kontrollon përshpejtimin dhe ngadalësimin e animacionit me kalimin e kohës.

Metoda që lehtësimin përdor si parazgjedhje quhet lëkundje, është i integruar në funksionalitetin bazë të jQuery. Shtojca lehtësuese e Robert Penner do t'ju lejojë të përdorni disa efekte të ndryshme.

Ekziston vetëm një paralajmërim kur po flasim në lidhje me përdorimin e efekteve lehtësuese personale: ju mund t'i përdorni ato vetëm në lidhje me efekte speciale animacion, pra me metodën animate (). Pasi të keni përfshirë shtojcën, është shumë e lehtë të përdorni çdo metodë lehtësuese duke e kaluar atë si parametër:

$("#somelement").animate(( gjerësia: "90%" lartësia: "183px", ), 550, "easeInElastic");

Mund të kontrolloni se si duken efektet e ndryshme lehtësuese në veprim në faqen demo, në seksionin përkatës. Dhe ndërsa disa nga efektet nuk do të funksionojnë në të gjitha situatat, animacioni juaj do të duket shumë më tërheqës kur përdorimin e duhur disa metoda lehtësuese.

Hapi 6: Hapi lart - jQuery UI

Përmirësimi në jQuery UI na sjell një sërë veçorish të nevojshme. Në fakt, për të përdorur veçori shtesë, nuk keni nevojë bibliotekë e plotë. Për marrjen funksionalitetin e dëshiruar, ju duhen efektet e integruara. Jo vetë UI bazë, vetëm një skedar me efekte të integruara, i cili peshon rreth 10 kilobajt.

Shumica funksione të rëndësishme që ofron biblioteka e efekteve jQuery UI është mbështetje për animimin e ngjyrave, lehtësimin dhe tranzicionin e klasave.

Nëse ju kujtohet, unë tashmë thashë se animacioni në jQuery mund të aplikohet vetëm vlerat numerike. Me jQuery UI, mund ta harroni këtë kufizim. Tani mund të animoni lehtësisht ngjyrë e sfondit elementi, ngjyra e kufirit etj. Gjithashtu, në vend që të krijojë funksione të veçanta për veçori të reja, jQuery UI thjesht zgjeron funksionalitetin bazë. gjallëroj. Kjo do të thotë, nëse e keni përfshirë bibliotekën në faqen tuaj, mund të përdorni metodën e zakonshme gjallëroj dhe do të bëjë të gjitha punët e pista për ju.

Për shembull, nëse doni të animoni ngjyrën e kufirit të një elementi në lëvizje, atëherë kodi juaj do të duket si ky:

$(".block") "), 500);));

Kalimet e klasave janë përgjegjëse për animacionin ndërmjet klasave. Duke përdorur biblioteka bazë jQuery nëse e hiqni dhe më pas shtoni një klasë që ndryshon pamjen element, ndodh në çast. Kur keni në dispozicion bibliotekën UI, mund të kaloni Opsione shtesë, kontrollimi i shpejtësisë së animacionit, metoda lehtësimin dhe kthimi i thirrjes. Ky funksionalitet, si ato të mëparshmet, është ndërtuar në krye të API-së ekzistuese jQuery për ta bërë më të lehtë kalimin.

Hapi 7. Krijimi i efektit të parë, real

Të gjithë shembujt e mësipërm janë vetëm demonstrime të funksionalitetit. Do të ishte mirë t'i përdorni ato për të krijuar një efekt të vërtetë. Kjo është ajo që ne do të bëjmë. Efekti ynë nuk do të jetë diçka radikale apo e veçantë, por me ndihmën e tij, ju do të mësoni se si të zbatoni njohuritë e marra në praktikë.

Le të themi se duam të shfaqim një imazh me dy seksione brenda tij kur rri pezull mbi të me miun. Seksioni i sipërm do të përmbajë titullin e figurës, pjesa e poshtme do të përmbajë titullin e figurës Përshkrim i shkurtër. E di që mund të gjesh sasi e madhe shtojca të ndryshme që bëjnë të njëjtën gjë, por sot do ta bëjmë nga e para. Nuk është aq e vështirë sa duket. Në fakt, është shumë e thjeshtë dhe bëhet mjaft shpejt. Le të fillojmë.

HTML

Së pari na duhet një bazë HTML

Për këtë efekt, duhet të mendojmë për strukturën e secilit element. Çdo element do të mbështillet në një div, me klasën artikull. Brenda div, do të vendosen tre elementë: një imazh dhe dy div që përmbajnë emrin dhe përshkrimin e imazhit.

Pjesët e tjera janë mjaft të thjeshta. Ne do të duhet të përfshijmë bibliotekën jQuery, jQuery UI dhe një skedar që përmban kodin tonë personal në faqe. Mos harroni se ne kemi nevojë vetëm për efekte jQuery UI, nëse doni të përfshini më shumë efekte do t'ju duhen kuvend i veçantë, të cilin mund ta shkarkoni këtu.

Kështu do të duket faqja jonë në këtë fazë.

css

.artiku ( pozicioni: relative; diferenca: 20 px 60 px 40 px 0; tejmbushje: e fshehur; ) .artikull .title, .artikull .desc ( sfondi: #000; ngjyra: #fff; pozicioni: absolut; shfaqja: bllok; gjerësia: 638 px ; errësirë: 0,4; ) .artikull .titulli ( lart: 0; madhësia e shkronjave: 16 px; mbushja: 12 px 10 px 25 px 0; rreshtimi i tekstit: djathtas; ) .artiku .desc (poshtë: 0; madhësia e shkronjave: 12 px; mbushje: 5px 0 15px 10px;)

Këtu ka disa pika që duhet t'i kushtoni vëmendje. Çdo element ka një veti pozicion në kuptim i afërm, në mënyrë që të vendosen lehtësisht të tjerët brenda këtij elementi. Gjithashtu, blloqeve u caktohet prona vërshoj: i fshehur, në mënyrë që të fshehim emrin dhe përshkrimin e figurës nga jashtë kur ato nuk janë të nevojshme.

Blloqet që përmbajnë një titull dhe përshkrim kanë pronën pozicioni: absolut, kështu që ato janë të pozicionuara saktësisht brenda kutisë së imazhit. Titullit i caktohet një koordinatë lartë: 0, në mënyrë që ajo të jetë e vendosur në krye, dhe përshkrimi fund: 0, dhe përkatësisht ndodhet në fund.

Pjesa tjetër e CSS është shumë e thjeshtë, stilet e shkronjave janë caktuar, disa pozicionime. Asgje speciale.

Tani faqja jonë duket kështu.

Aktivizo JavaScript Magic

$(document).ready(function() ( // Kodi për pjesë të tjera të demonstrimit $(".item").children("div.title").animate((lart: -60), 300); $(".item").fëmijët("div.desc").animate((poshtë: -40), 300); $(".item").hover(function() ( $(this).children("div.title").stop().animate((lart: 0), 700, "easeOutBounce"); $(kjo ).children("div.desc").stop().animate((poshtë: 0), 700, "easeOutBounce"); ), function()($(this).children("div.title"). stop().animate((lart: -60), 500);$(this).children("div.desc").stop().animate((poshtë: -40), 400); )); $(".title, .desc").hover(function() ( $(this).stop().animate((ngjyra e sfondit: "#444"), 700, "easeOutSine"); ), funksion()( $(this).stop().animate((Ngjyra e sfondit: "#000"), 700); )); ));

Mund të duket paksa e komplikuar, por në të vërtetë nuk është. Le të hedhim një vështrim në secilën pjesë.

Logjika pas këtij efekti është shumë e thjeshtë. Meqenëse i pozicionuam absolutisht elementët, fillimisht i fshehim jashtë kutisë së imazhit. Kur lëvizim miun mbi imazhet, thjesht duhet t'i kthejmë ato në pozicionin e tyre origjinal.

Së pari, ne zhvendosim titullin dhe përshkrimin jashtë bllokut prind. Por në vend që të përdorim CSS, ne e bëjmë këtë JavaScript, për arsye shumë specifike. Edhe nëse JS është i çaktivizuar, faqja do të vazhdojë të jetë funksionale. Titulli dhe përshkrimi do të mbeten në krye të imazhit dhe do të shfaqen sikur të jetë aplikuar një efekt hover. Por nëse i fshehim këto blloqe me duke përdorur CSS, dhe JS në faqe do të çaktivizoheshin, nuk do të shfaqen kurrë në ekran.

Kodi ynë fillon duke krijuar një funksion rri pezull për çdo element. Funksioni i parë ekzekutohet kur miu është pezulluar, i dyti - anasjelltas, kur miu është larguar.

Brenda funksionit, kjo- tregon elementin që shkaktoi ngjarjen. Ne përdorim metodën gjallëroj, për të ndryshuar vlerat përkatëse. Ne gjithashtu përdorim lehtësimin, për të shtuar më shumë tërheqje për efektin tonë. Kur largojmë miun, thjesht i ndryshojmë vlerat në gjendjen e tyre origjinale.

Si pak më tepër, nëse qëndroni pezull mbi blloqet e titullit ose përshkrimit, ato do të ndryshojnë ngadalë ngjyrën, falë jQuery UI.

Kjo është e gjitha, efekti ynë është gati për t'u përdorur. Ju mund të shikoni dhe me shembujt e dhënë.

jQuery është një bibliotekë e mrekullueshme që është diversifikuar ndjeshëm vitet e fundit qasjet e zhvilluesve për zgjidhjen e problemeve me të cilat përballen. Kur jQuery CSS nuk mund të krijonte animacione komplekse; JavaScript është përdorur për t'i krijuar ato. jQuery e ka bërë më të lehtë krijimin e animacioneve me një rend të madhësisë. Biblioteka përmban animacionet më të thjeshta (fadeIn(), hide(), slideDown(), etj.) dhe ju lejon të krijoni çdo animacion duke përdorur metodën animate(). Ky artikull i kushtohet përshkrimit të kësaj metode.

jQuery animate() është një metodë mbështjellëse, që do të thotë se funksionon në një grup të parazgjedhur elementësh DOM të mbështjellë në jQuery. Metoda ju lejon të aplikoni efektet e kërkuara të animacionit tek elementët në grup. Zbatimi i sa më sipër në praktikë është bërë i mundur nga prania e një grupi të vetive CSS dhe vlerave që këto veti do të marrin pas përfundimit të animacioneve. Vlerat e ndërmjetme që do të ketë stili kur të arrihet efekti i dëshiruar (të kontrolluara automatikisht nga motori i animacionit) përcaktohen nga kohëzgjatja e efektit dhe funksioni i lehtësimit; Këto dy opsione do të diskutohen më poshtë.

Lista e vetive CSS që mund të animohen është e kufizuar në ato që mund të marrin vlera numerike. Vlerat mund të jenë absolute (p.sh. 200) ose relative. Me vlera absolute, njësia e paracaktuar e jQuery është pikselët. Mund të përdorim edhe njësi specifike: em, rem ose përqindje. Prefikset += ose -= përdoren për të specifikuar vlerat relative; prefikset drejtojnë vlerën relative të synuar në një drejtim pozitiv ose negativ, përkatësisht.

Parametrat dhe nënshkrimi i metodës animate().

Metoda ka dy forma kryesore; shumica e parametrave të përdorur janë opsionale (të mbyllura në kllapa katrore).

• animate (vetitë[, kohëzgjatja][, lehtësimi][, kthimi i thirrjes])
• animate (vetitë[, opsionet])

Në thelb, parametrat janë:

• pronat (Object): Një listë e vetive css që përmbajnë vlerat e arritura në fund të animacionit.
• kohëzgjatja (Numri|String): kohëzgjatja e efektit në milisekonda ose një prej vargjet e instaluara: "i ngadalshëm" (600 ms), "normal" (400 ms) ose "i shpejtë" (200 ms). Vlera e paracaktuar është "normale".
• lehtësim (String): Emri i funksionit lehtësues (i cili përcakton ndryshimin në shpejtësinë e animacionit) i përdorur gjatë tranzicionit. Vlera e paracaktuar është "lëkundje".
• kthimi i thirrjes (Funksioni): Funksioni që do të ekzekutohet kur animacioni përfundon për çdo element të animuar.
• opsionet (Object): Një objekt që përmban një grup karakteristikash (opsione shtesë) për t'i kaluar metodës. Në dispozicion vetitë e mëposhtme:
  • gjithmonë (Funksion): Një funksion që thirret kur animacioni përfundon ose kur animacioni ndalon (por nuk përfundon) në ekzekutim.
  • i plotë (Funksioni): Funksioni që do të ekzekutohet kur të përfundojë animacioni.
  • bërë (Funksioni): Funksioni për të thirrur kur animacioni është i plotë.
  • kohëzgjatja (String|Numri): e përshkruar më sipër.
  • lehtësim (String): E përshkruar më sipër.
  • dështoj (Funksioni): ekzekutohet kur përpjekje e dështuar animacionet.
  • progresi (Funksioni): Ekzekutohet pas çdo hapi të animacionit. Thirret një herë për çdo element pasi të jetë ekzekutuar animacioni i tij.
  • radha (Boolean): kur animacioni duhet të vendoset në radhën e efekteve (detajet më poshtë).Vlera e paracaktuar është e vërtetë.
  • specialEasing (Object): një objekt parametrat e të cilit janë vetitë css vlerat e të cilit janë funksione tranzicioni
  • start (Funksion): Ekzekutohet kur animacioni fillon të ekzekutohet.
  • hap (Funksion): Një funksion i thirrur për çdo veti të animuar të çdo elementi të animuar.

Termi lehtësim përdoret për të përshkruar një metodë që kontrollon përpunimin dhe vendos shpejtësinë e kuadrove të një animacioni. Animacioni funksionon në mënyrë sekuenciale nëse opsioni i radhës është vendosur në true, dhe paralelisht (pa radhë) nëse vendoset në false.

Shembuj të përdorimit të metodës animate().

Le ta zbatojmë këtë metodë në praktikë. Vini re se animacionet komplekse të renditjes së krijuar nga kjo metodë mund të shkaktojnë gabime. Kjo do të thotë, për animacione shumë komplekse, kjo metodë shmanget më së miri.

Animacion i vetëm

Krijimi i një animacioni të vetëm është jashtëzakonisht i thjeshtë, mjafton një telefonatë. Për shembull, ju duhet të zhvendosni një element nga njëra anë e bllokut në tjetrën. Për të ilustruar këtë animacion, le të krijojmë dy element div, njëri brenda tjetrit. Stili është si më poshtë: sfondi i ndarjes së brendshme është i kuq. Kodi:

HTML

css

.drejtkëndësh ( gjerësia: 300 px; lartësia: 20 px; ekrani: blloku; pozicioni: relative; kufiri: 1 px i zi; margjina: 20 px 0; ) .katror-i vogël (ekrani: blloku; gjerësia: 20 px; lartësia: 20 px; pozicioni: absolute; ngjyra e sfondit: e kuqe;)

Le të animate () dhe të lëvizim katrorin e vogël nga njëra anë në tjetrën:

jQuery

$(".rectangle") .find(".square-small") .animate(( majtas: 280 ), "i ngadalte");

Vetëm vetia e majtë është e animuar. Kohëzgjatja e animacionit - paraprakisht vlera e vendosur i ngadalshëm (600 ms). Brendshme

Artikujt kryesorë të lidhur