element til høyre til det når den venstre 250px-egenskapen:

Som standard alle HTML-elementer har en statisk posisjon og kan ikke flyttes.
For å manipulere posisjonen må du først sette posisjonen til elementets CSS-egenskap til relativ, fast eller absolutt!

JQuery animate () - Manipulere flere egenskaper

Merk at flere egenskaper kan animeres samtidig:

Er det mulig å manipulere alle CSS-egenskaper med animasjonsmetoden ()?

Ja nesten! Det er imidlertid en viktig ting å huske: alle eiendomsnavn må være kamelhus når deling med animate ()-metoden: Du må skrive paddingLeft i stedet for padding-left, marginRight i stedet for margin-right, og så videre.

Fargeanimasjon er heller ikke inkludert i Jquery-hovedbiblioteket.
Hvis du vil bringe farge til liv, må du laste ned Color Animations-plugin fra jQuery.com.

JQuery animate () - Bruker relative verdier

I tillegg kan du definere relative verdier (verdi deretter i forhold til gjeldende verdi av varen). Dette gjøres ved å sette + = eller - = foran verdien:

JQuery animate () - bruker forhåndsdefinerte verdier

Du kan til og med spesifisere en animasjonsegenskapsverdi som "vis", "skjul" eller "veksle":

JQuery animate () - Bruker køfunksjonalitet

Jquery kommer med animasjonskøfunksjonalitet som standard.

Dette betyr at hvis du skriver flere animerte ()-kall etter hverandre, oppretter JQuery en "intern" kø med disse metodekallene. Deretter starter han de animerte samtalene én etter én.

Så hvis du ønsker å utføre forskjellige animasjoner etter hverandre, drar vi nytte av køfunksjonaliteten:

Eksempel 1

$ ("knapp"). klikk (funksjon () (
var div = $ ("div");
div.animate ((høyde: "300px", opasitet: "0.4"), "sakte");
div.animate ((bredde: "300px", opasitet: "0.8"), "sakte");
div.animate ((høyde: "100px", opasitet: "0.4"), "sakte");
div.animate ((bredde: "100px", opasitet: "0.8"), "sakte");

Et lite snev av animasjon kan forskjønne ethvert kjedelig grensesnitt. I dagens artikkel vil du lære hvordan du bruker den riktig med bruker jQuery.

Introduksjon

Animasjon er et konsept som vanligvis får blandede reaksjoner fra folk. Noen anser det som nyttig, mens andre fordømmer overforbruket. Uansett, når den brukes riktig, lyser animasjon ofte opp brukergrensesnittet og gjør det renere og mer livlig. I dagens artikkel skal vi ta en rask titt på Grunnleggende om jQuery, så lærer vi hvordan vi lager vår første animasjon, lærer hvordan vi bygger ulike effekter, og deretter lager vi en animasjon som kan brukes i virkelige prosjekter.

Trinn 1. Grunnleggende om jQuery

jQuery er JavaScript-bibliotek, som har som mål å hjelpe utvikleren med å lage rike, interaktive nettsider og brukergrensesnitt ved å bruke minst mulig mengde kode.

En typisk kodelinje ser slik ut:

$ (DOM Element) .noe ();

La oss bryte ned hver del:

• $ - Stenografi for jQuery-objekt. Hvis du bruker flere rammeverk samtidig på samme side, i stedet for $-tegnet, bruk jQuery-stenografien: jQuery (DOM Element) .something ();
• (DOM-element)– Elementet du skal gjøre noe med. Dette er en av nøkkelegenskaper jQuery. Du kan bruke CSS Selectors for å få ønsket vare... Alle velgere som fungerer i en CSS-fil kan brukes her. ID-er, klasser, pseudo-klasser, hva som helst.
• .noe ()- Hva du vil gjøre med det resulterende elementet. Dette kan være alt fra å skjule et element til å lage en AJAX-forespørsel til en hendelsesbehandler.

I dag skal vi bare se på animasjon, og effektene knyttet til funksjonaliteten.

Trinn 2. Bruke de innebygde effektene

jQuery tilbyr et stort antall innebygde metoder som du kan bruke rett ut av boksen. Dette er metoder for å vise / skjule elementer, med ulike variasjoner, inkludert å skyve et element og endre dets opasitet. Du kan også bruke en rekke metoder veksle som endrer synligheten til elementet.

Før vi ser på hver av disse metodene, ta en titt på det grunnleggende formatet for å kalle hver metode:

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

Ovenfor er det grunnleggende jQuery-paradigmet, først får vi elementet vi trenger ved å bruke CSS-velgere. Deretter kaller vi bare noen av de innebygde metodene.

Selv om de fleste metoder kan kalles uten parametere, er det ofte nødvendig å tilpasse funksjonaliteten deres. Hver av metodene tar minst to parametere: hastighet og Ring tilbake.

hastighet- definerer varigheten av animasjonen i sekunder. Du kan sende ett av følgende som en verdi søkeord: sakte, normal eller rask eller angi tiden i millisekunder.

Ring tilbake Er en funksjon som utføres etter at animasjonen er fullført. Du kan bruke den til hva som helst, for eksempel, foreta et AJAX-anrop i bakgrunnen, oppdatere delen brukergrensesnitt og mye mer. Du er bare begrenset av fantasien din.

• forestilling/gjemme seg- Metoder for å vise og skjule et element. Godtar hastighet og tilbakeringing som parametere.
• veksle- En metode som manipulerer visningen av et element, avhengig av nåværende tilstand element. Det vil si at hvis den er skjult, viser den den og omvendt. Bruker vis og skjul metoder.
• Skli ned/skli opp– Helt åpenbare metoder. Ved å endre høyden på et element, opprettes en glidende animasjon som viser eller omvendt skjuler elementet.
• slideToggle- Mye det samme som vekslemetoden, bortsett fra at den bruker slideDown / slideUp-metodene for å vise / skjule elementet.
• fadeIn/uttoning- Endre gjennomsiktigheten til et element for å skape en falmingseffekt.
• fadeTo- Endrer gjennomsiktigheten til elementet i henhold til den beståtte verdien. Som du kanskje gjetter, krever det en ekstra parameteropasitet, der 0 er full gjennomsiktighet og 1 er full opasitet.

Som en tilleggsfunksjonalitet, metoden veksle, kan ta som en parameter et uttrykk som bestemmer om elementet skal vises eller skjules.

For eksempel hvis du bare vil bytte listeelementer som har en klasse effekt, vil koden din se slik ut:

$ ("li"). toggle ($ (dette) .hasClass ("effekt"));

Enkelt sagt, funksjonen veksle sjekker uttrykket som sendes til det som en parameter, og hvis det er sant, veksler det synligheten til elementet. Uttrykket som vi passerte i eksemplet sjekker om elementet har en bestemt klasse.

Trinn 3. Lag din egen animasjon

Svært ofte passer ikke de innebygde metodene dine behov, i så fall vil du mest sannsynlig ønske å lage dine egne effekter. Med jQuery kan du enkelt gjøre dette.

For å lage en personlig animasjonseffekt trenger du metoden animere... Det ser slik ut:

$ ("# somelement"). animate ((egenskap: verdi),);

Metode animere er ganske lik enhver annen metode ved at den brukes på nøyaktig samme måte. Vi får et element og sender deretter noen parametere til det. De aksepterte parameterne er hva metoden er animere forskjellig fra de forhåndsinnstilte effektene.

Hastighets- og tilbakeringingsparametrene utfører samme funksjon som i tidligere metoder... Et objekt med egenskaper som består av et visst antall nøkkel/verdi-par er det som gjør denne metoden unik. Du passerer hver eiendom du vil animere sammen med endelig resultat... Anta for eksempel at du vil animere et elements bredde for å endres til 90 % av dets gjeldende verdi. Dette kan gjøres som følger:

$ ("# somelement"). animate ((bredde: "90%"), 350, funksjon () (varsel ("Animasjonen er ferdig.");));

Kodeeksemplet ovenfor animerer breddeendringen til 90 % og viser deretter en melding om at animasjonen er fullført.

Merk at du ikke er begrenset i antall. Du kan legge til animasjon til et stort utvalg egenskaper, inkludert gjennomsiktighet, marger, utfylling, kanter, skriftstørrelser. Metode animere, er også praktisk fordi den kan fungere med alle måleenheter. Piksler, ems, prosenter - alt fungerer. Så selv det obfuskerte kodeeksemplet nedenfor vil fungere. Sannheten vil ikke se veldig klar ut.

$ ("# somelement"). animere ((bredde: "90%" fontstørrelse: "14em", høyde: "183px", opasitet: 0.8, marginTop: "2cm", marginLeft: "0.3in", borderBottom: "30mm ",), 350, function () (varsel (" Animasjonen er ferdig kjørt. ");));

Når du spesifiserer en egenskap som består av flere ord, skrives den uten bindestrek, og den første bokstaven i det andre ordet må være stor. Denne notasjonen er vesentlig forskjellig fra den vanlige CSS-syntaksen, så sørg for å prøve å huske den. For eksempel eiendommen border-top, bør skrives borderTopp.

Merk: jQuery lar deg bare animere numeriske egenskapsverdier. Dette betyr at du ikke kan animere fargeegenskaper kun ved å bruke jQuery. Men det er ikke så ille. Med litt jQuery UI-hjelp kan du legge til fargeanimasjoner veldig enkelt.

Trinn 4. Sette opp effekten

Hvis du ser på den enkle effekten på demosiden, har du kanskje lagt merke til en liten feil. Flere pekepinner over et element resulterer i en lang kø med repeterende animasjonseffekter... Resultatet er en ubehagelig, rykkende effekt.

Den enkleste måten å løse dette problemet på er å bruke metoden Stoppe, rett før animasjonen starter. Denne metoden rydder perfekt opp i køen og animasjonen kjører normalt.

Dette er for eksempel din vanlige kode:

$ ("# someelement") .hover (funksjon () ($ (dette) .animate ((topp: 20), "rask");), funksjon () ($ (dette) .animate ((øverst: 0) , "fort");));

Ved å bruke metoden Stoppe for å forhindre unødvendige repetisjoner av animasjonen, vil den nye koden din se slik ut:

$ ("# someelement") .hover (funksjon () ($ (dette) .stopp (). animere ((topp: 20), "rask");), funksjon () ($ (dette) .stopp () .animate ((øverst: 0), "rask");));

Veldig enkelt, ikke sant? Men denne metoden har ett lite problem. Rask bevegelse gir ikke en repeterende effekt, men det kommer på prisen av ufullstendig animasjon. Hvis du vil løse dette problemet fullstendig, trenger du en plugin som hoverFlow.

Trinn 5. Legge til realisme - lettelser

Hvis du vil legge til litt mer realisme, trenger du ekstra kontroll over hastigheten animasjonen kjører med. Det er her lettelser kommer oss til unnsetning. Lettere kontrollerer akselerasjonen og retardasjonen av animasjonen over tid.

Metode som lettelser bruker som standard, kalt svinge, er den innebygd i kjernefunksjonaliteten til jQuery. Robert Penners easing-plugin lar deg bruke flere forskjellige effekter.

Det er bare ett forbehold når det kommer om bruk av personlige lettelseseffekter: du kan bare bruke dem sammen med spesialeffekter animasjon, det vil si med metoden animere ()... Når du har koblet til plugin-en, er det veldig enkelt å bruke en hvilken som helst lettelsesmetode ved å sende den som en parameter:

$ ("# somelement"). animate ((bredde: "90%" høyde: "183px",), 550, "easeInElastic");

Du kan sjekke hvordan de ulike lettelseseffektene ser ut i aksjon på demosiden i den aktuelle delen. Selv om noen av effektene kanskje ikke passer for alle situasjoner, vil animasjonen din se mye mer attraktiv ut når riktig bruk noen lettelsesmetoder.

Trinn 6. Gå opp et hakk - jQuery UI

Oppgradering til jQuery UI gir oss en rekke nødvendige funksjoner... Faktisk til bruk tilleggsfunksjoner, trenger du ikke et komplett bibliotek. For å få funksjonaliteten du ønsker, trenger du innebygde effekter. Ikke kjernen i selve brukergrensesnittet, bare en fil med innebygde effekter, som veier rundt 10 kilobyte.

Mest viktige funksjoner Effektbiblioteket i jQuery UI gir støtte for fargeanimasjon, lettelser og klasseoverganger.

Hvis du husker, har jeg allerede sagt at i jQuery kan animasjoner bare brukes på numeriske verdier... Med jQuery UI kan du glemme denne begrensningen. Nå kan du enkelt animere bakgrunnsfarge element, rammefarge og lignende. I stedet for å lage separate funksjoner for nye funksjoner, utvider jQuery UI ganske enkelt den grunnleggende funksjonaliteten. animere... Det vil si at hvis du har inkludert biblioteket på siden din, kan du bruke den vanlige metoden animere og han vil gjøre alt det skitne arbeidet for deg.

For eksempel, hvis du vil animere kantfargen til et element ved sveving, vil koden din se slik ut:

$ (". block"). hover (function () ($ (this) .animate ((borderColor: "black"), 1000);), function () ($ (this) .animate ((borderColor: "red "), 500);));

Klasseoverganger er ansvarlige for å animere mellom klassene. Med kjernebiblioteket i jQuery, hvis du fjerner og deretter legger til en klasse som endrer utseendet til et element, skjer det umiddelbart. Når du har et UI-bibliotek til rådighet, kan du bestå Ekstra alternativer som styrer hastigheten på animasjonen, metoden lettelser og Ring tilbake... Denne funksjonaliteten, som de forrige, er bygget på toppen av den eksisterende jQuery API for å lette overgangsprosessen.

Trinn 7. Lag din første, virkelige effekt

Alle eksemplene ovenfor er bare demoversjoner av funksjonaliteten. Det ville vært fint å bruke dem til å skape en ekte effekt. Dette er hva vi skal gjøre. Effekten vår vil ikke være noe radikal eller spesiell, men med dens hjelp vil du lære hvordan du kan bruke kunnskapen som er oppnådd i praksis.

Anta at vi må vise et bilde, inni hvilket to seksjoner vil vises ved musepeker. Den øverste delen vil inneholde tittelen på bildet, den nederste delen vil inneholde dens Kort beskrivelse... Jeg vet at du kan finne tonnevis av forskjellige plugins som gjør det samme, men i dag skal vi gjøre det fra bunnen av. Det er ikke så vanskelig som det høres ut. Faktisk er det veldig enkelt og ganske raskt å gjøre. La oss begynne.

Html

Først trenger vi en HTML-base.

For denne effekten må vi tenke på strukturen til hvert element. Hvert element vil bli pakket inn i en div, med klassen punkt... Inne i div-en vil tre elementer plasseres: et bilde, og to div-er som inneholder navnet og beskrivelsen av bildet.

Resten av delene er ganske enkle. Vi må koble til siden jQuery bibliotek, jQuery UI og filen som inneholder vår egendefinerte kode. Husk at vi kun trenger jQuery UI-effekter, hvis du ønsker å inkludere flere effekter trenger du en spesiell assembly, som kan lastes ned her.

Slik vil siden vår se ut på dette stadiet.

CSS

.item (posisjon: relativ; margin: 20px 60px 0; overflyt: skjult;) .item .title, .item .desc (bakgrunn: # 000; farge: #fff; posisjon: absolutt; display: blokk; bredde: 638px ; opasitet: 0,4;) .item .title (øverst: 0; skriftstørrelse: 16px; utfylling: 12px 10px 25px 0; tekstjustering: rightright;) .item .desc (nederst: 0; font-size: 12px; polstring: 5px 0 15px 10px;)

Det er et par ting du bør være oppmerksom på her. Hvert element har et egenskapssett posisjon i verdi slektning, slik at det er enkelt å plassere andre inne i dette elementet. Dessuten er blokkene tildelt eiendommen overløp: skjult, slik at vi kan skjule tittel og beskrivelse av bildet fra utsiden når de ikke er nødvendige.

Blokker som inneholder en tittel og beskrivelse har egenskapen satt posisjon: absolutt slik at de er nøyaktig plassert i bildeboksen. Koordinat tilordnet tittel topp: 0 så den sitter øverst, og beskrivelsen bunn: 0, og følgelig er den plassert nederst.

Resten av CSS er veldig enkel, skriftstiler er tildelt, litt posisjonering. Ikke noe spesielt.

Nå ser siden vår slik ut.

Slår på JavaScript-magi

$ (dokument) .ready (funksjon () (// Kode for andre deler av demoen $ (". element"). barn ("div.title"). animere ((øverst: -60), 300); $ (". element"). barn ("div.desc"). animere ((nederst: -40), 300); $ (". element"). hover (function () ($ (this) .children ("div.title"). stop (). animate ((top: 0), 700, "easeOutBounce"); $ (this ) .children ("div.desc"). stop (). animate ((nederst: 0), 700, "easeOutBounce");), funksjon () ($ (dette) .children ("div.title"). stop (). animate ((øverst: -60), 500); $ (this) .children ("div.desc"). stop (). animate ((nederst: -40), 400);)); $ (". title, .desc"). hover (function () ($ (this) .stop (). animate ((backgroundColor: "# 444"), 700, "easeOutSine");), function () ( $ (dette) .stop (). animate ((bakgrunnsfarge: "# 000"), 700);)); ));

Det kan se litt komplisert ut, men det er det egentlig ikke. La oss ta en titt på hver del.

Logikken bak denne effekten er veldig enkel. Siden vi plasserte elementene absolutt, skjuler vi dem først utenfor bildeboksen. Når vi holder musepekeren over bildene, trenger vi bare å sette dem tilbake til sin opprinnelige posisjon.

Først flytter vi tittelen og beskrivelsen utenfor den overordnede blokken. Men i stedet for å bruke CSS, gjør vi dette bruker JavaScript, av svært spesifikke grunner. Selv om JS er deaktivert, vil siden fortsatt fungere. Tittelen og beskrivelsen forblir på toppen av bildet, og vil se ut som om det ble brukt en sveveeffekt. Men hvis vi gjemte disse blokkene med bruker CSS og JS på siden ville bli deaktivert, ville de aldri vises på skjermen.

Koden vår starter med å lage en funksjon sveve for hver vare. Den første funksjonen utføres ved musepeker, den andre, tvert imot, ved tilbaketrekking.

Inne i en funksjon, dette- indikerer elementet som utløste hendelsen. Vi bruker metoden animere, for å endre de tilsvarende verdiene. Vi bruker også lettelser for å legge til mer appell til vår effekt. Når vi holder musen, endrer vi ganske enkelt verdiene tilbake til deres opprinnelige tilstand.

Som et lite tillegg, vil sveve over tittel- eller beskrivelsesblokker sakte endre farge, takket være jQuery UI.

Det er det, vår effekt er klar til bruk. Du kan se på og med eksemplene gitt.

Metoden jQuery Animated () lar deg lage tilpassede animasjoner.

JQuery-animasjonseksempler

JQuery animasjon - animere () metode

Metoden jQuery animate () brukes til å lage tilpassede animasjoner.

Syntaks:

$(velger) .animate (( params} , hastighet, tilbakeringing);

Obligatorisk Params-parameter definerer formasjonen CSS-egenskaper animasjon.

Den valgfrie hastighetsparameteren bestemmer effektens varighet. Det kan ta følgende verdier: "sakte", "rask" eller millisekunder.

Den valgfrie tilbakeringingsparameteren er navnet på funksjonen som skal utføres ved fullføring.

Følgende eksempel viser en enkel animert () applikasjonsmetode. den