Hvordan lage tilpassede animasjoner i jQuery

Animasjonene gir forskjellige forskjønnende effekter for å engasjere seerne. JQuery støtter en lang liste over metoder for å utføre forskjellige operasjoner. JQuery Animate () -metoden brukes til å lage tilpassede animasjoner i jQuery. CSS -egenskapene er den viktigste interessenten for jQuery Animate () -metoden. Disse egenskapene kan animeres i forskjellige hastigheter med forskjellige verdier. Dette innlegget tar sikte på å gi detaljerte retningslinjer for animasjoner i jQuery med følgende læringsresultater

• Arbeidsmekanisme for animatemetode () metode
• Opprette tilpassede animasjoner (ved hjelp av eksempler)

Hvordan animere () -metoden fungerer i jQuery

Animatemetoden () som brukes til å lage animasjoner har følgende syntaks.

Syntaksen gitt ovenfor har følgende forekomster

• velger kan være et hvilket som helst elementnavn, klasse eller ID for et element
• De CSS En del av Animate () -metoden er obligatorisk for animasjoner og CSS -egenskapen du vil animere ville ligge i CSS En del av syntaksen
• De hastighet definerer varighet av animasjonen, og den kan stilles til å "raskt", "sakte" eller i millisekunder (numerisk verdi)
• Til slutt Ring tilbake er en valgfri parameter og brukes til å vise noe behandling etter at animasjonen er utført

Animat () syntaks behandler den numeriske verdien for å endre CSS. For eksempel kan ikke bakgrunnsfargeegenskapen settes ved hjelp av fargenavnet, derfor er CSS Color -egenskapen ikke inkludert i jQuery -animasjoner. Dessuten må eiendomsnavnene være i kamel saken som bordercolor, borderbredde og så videre.

Hvordan lage tilpassede animasjoner i jQuery

Som diskutert tidligere, praktiseres animatemetoden for å lage jQuery -animasjoner. Den animerte metoden kan brukes i følgende scenarier

Flere animasjoner på en gang: Alle de spesifiserte animasjonene blir fremført i en enkelt Go.

Animere CSS -egenskapene en etter en: I dette tilfellet brukes animeringen () -metoden på en sekvensiell måte (den ene etter den andre).

Relativ verdi's animasjon: Vanligvis er CSS -egenskapene animert ved å bruke gjeldende verdi av en CSS -egenskap. Imidlertid tillater animatemetoden () metoden å utføre dynamiske animasjoner ved å bruke det relative verdifenomenet.

Vi ville øve på mulige måter i de kommende eksemplene.

Eksempel 1: Flere animasjoner samtidig

Nesten alle CSS -egenskapene kan animeres ved hjelp av Animate () -metoden. Dette eksemplet illustrerer jQuery () animasjonseffekten ved bruk av flere CSS -egenskaper.

I koden ovenfor,

• Ulike CSS -egenskaper (bredde, høyde og skriftstørrelse) av DIV -elementet vil bli animert
• Hastigheten er satt til å sakte

Produksjon

Før animasjon

Etter animasjon

Eksempel 2: den ene etter den andre

Animasjonseffekten kan forskjønnes ved å animere CSS -egenskaper en etter en. La oss se på denne metoden.

Ovennevnte kode praktiserer animasjonen på en div element og blir forklart nedenfor

• de polstring, høyde, bredde og grensebredde med forskjellige hastighetsverdier
• For det første vil polstringen bli animert fulgt etter høyde, bredde og grensebredde

Produksjon

Før animering

Etter animasjon

Eksempel 3: Relative verdier

De relative verdiene genereres ved bruk av to oppdragsoperatører “+=” og “-=”. Den nåværende verdien av CSS -egenskapen tas som referanseverdier og nye verdier genereres ved å legge til/trekke fra en viss numerisk verdi fra den gjeldende verdien.

I koden ovenfor,

• bredden og høyden på diven vil bli animert
• Ved hvert klikk (i vårt tilfelle) vil bredden øke med 10px mens høyden vil bli redusert med 5px.

Produksjon

Før animasjon,

Etter flere klikk,

Eksempel 4: Bruke strengverdier

Animeringsmetoden () aksepterer bare tre strengverdier (skjul, vis eller veksle) for CSS -egenskaper. Toggle -eiendommen kan animere den skjulte eiendommen for å vise og omvendt.

I koden ovenfor, Vis og veksle Operasjoner utføres på bredde og høyde henholdsvis. For dette har vi brukt knappeklasse = ”veksle”Og klasse =”forestilling” .

Produksjon

Før animasjon,

Etter å ha klikket på vippeknappen, vil bredden endre tilstanden (til skjult slik den er i "forestilling”Tilstand) som det kan sees i følgende bilde.

Hvis du klikker på showknappen, vil den vise div igjen.

Animasjonene har en nøkkelrolle i å følge noe innhold. Ved å følge disse eksemplene, ville du ha lært den tilpassede opprettelsen av animasjoner i jQuerry.

Konklusjon

Animatemetoden () brukes til å lage tilpassede animasjoner i jQuery. Animatemetoden () kan brukes for å animere flere CSS -egenskaper samtidig, eller den kan også brukes på en sekvensiell måte. Denne artikkelen gir en detaljert guide om å lage tilpassede animasjoner i jQuery. Du vil få en forståelse av Animate () -metoden (primær interessent for animasjoner). Videre demonstreres flere eksempler som viser opprettelsen av tilpassede animasjoner i jQuery.