JQuery Effects | Forklart

JQuery (hvis du ikke allerede er kjent med det) er et JavaScript -bibliotek som inneholder ofte brukte funksjonaliteter på en webside pakket inn i forskjellige funksjoner. Dermed gir et tidsbesparende grensesnitt for nettutvikleren. JQuery gir også et tidsbesparende grensesnitt for å lage animasjoner og overgangseffekter med nær ingen konfigurasjon (de fleste funksjoner tar 2 argumenter på maks). JQuery inneholder forskjellige typer funksjoner inkludert velgere, hendelser og effekter. I dette innlegget skal vi diskutere forskjellige typer effekter som er gitt av jQuery, deres syntaks sammen med deres eksempel

Sette opp HTML og inkluderer jQuery

For å begynne å bruke jQuery i prosjektet ditt, må du inkludere det inne i skriptetoden, vi bruker Google Hosted JQuery med følgende linje:

Etter at denne linjen er lagt til HTML -filen, kan vi begynne å skrive jQuery -kode

Animatemetoden ()

Den animerte metoden som tilbys av jQuery brukes til å skape veldig grunnleggende, men likevel attraktiv animasjon på websiden din. Denne funksjonen tar tre argumenter:

• En nødvendig parameter som er animasjon
• EN hastighet (Valgfritt) Parameter som definerer hastigheten på animasjonen
• EN Ring tilbake(Valgfri parameter) som som navnet indikerer er tilbakeringingsfunksjonen

Syntaks av animatemetoden ()

Syntaksen er ganske rett frem som allerede forklart ovenfor

[JQuerry_Selector $ ()].Animat (parameter, animasjon_speed, callback_function);

For å demonstrere dette, skal vi opprette en knapp og en div i HTML -filen vår ved å bruke følgende linjer:

Hallo! Jeg er Linuxbot
Klikk på meg!

Dette vil gi oss følgende resultat i nettleseren din:

For jQuery -koden skal vi snu opaciteten til div ned til 0.7 Men vi kommer til å gjøre det på 2 sekunder ved å bruke følgende kodelinjer:

$ ("knapp").klikk (funksjon ()
$ ("Div: Last").Animat (

Opacitet: "0.5 ",
,
2000
);
);

Som du kan legge merke til, har vi pakket inn Animer metode i en Klikk Hendelsesmetode slik at animasjonen vår bare blir påkalt når vi klikker på knappen. Når vi trykker på knappen, får vi følgende resultat:

Som du kan se, kunne vi animere opaciteten ved å bruke animeringsmetoden.

Show () og Hide () -metoden

Disse metodene brukes til å vise og skjule elementer på en webside, syntaks for begge disse funksjonene er nesten identisk som:

[JQuerry_Selector $ ()].vis (animasjon_speed, callback_function);
[JQuerry_Selector $ ()].skjul (animasjon_speed, callback_function);

For å demonstrere dette, skriv inn følgende linjer i HTML -filen vår:

Jeg kan forsvinne og dukke opp igjen
Gjemme seg
Forestilling

Du vil se følgende webside på nettleseren din:

Som du ser, har vi en div med litt tekst inni den sammen med to knapper som vil bruke disse gjemme seg og forestilling animasjoner.

For jQuery -delen, bruk følgende kodelinjer i JavaScript -filen din:

$ ("#Show").klikk (funksjon ()
$ ("#demo").Show (2000);
);
$ ("#skjul").klikk (funksjon ()
$ ("#demo").Skjul (2000);
);

Legge merke til: Vi har passert tiden som 2 sekunder, ellers vil endringen være øyeblikkelig og vi får ikke en animasjon som effekt.

Utfør filen og klikk på skjuleknappen, så får du følgende resultat:

Som du ser, får vi en attraktiv animasjon, neste trinn er å teste showanimasjonen ved å klikke på show -knappen. Så klikk på show -knappen, så får du følgende resultater:

Som du kan se, får vi en jevn ustokkende animasjon

Lysbilde- () -metoden:

Vi kan også få en jevn glideovergang med jQuery -biblioteket. Vi får tre funksjoner for lysbilde -animasjonen, disse er nemlig:

• skli opp()
• Skli ned()
• Slidetoggle ()

For å demonstrere dette skal vi implementere en Slidetoggle () -metode, bruk følgende linjer i HTML -filen:

Jeg kan forsvinne og dukke opp igjen


Klikk meg for å veksle lysbildet

For jQuery -koden, bruk følgende linjer i JavaScript -filen:

$ ("#Toggle").klikk (funksjon ()
$ ("#demo").Slidetoggle ("langsom");
);

Du får følgende resultat på skjermen:

Som du kan se, har vi en rask og glatt lysbildeveksling ved hjelp av jQuery. Bortsett fra disse gir jQuery en hel haug med andre animasjonsmetoder som du kan prøve ut.

Konklusjon

JQuery kommer med noen attraktive effekter og animasjonsmetoder som virkelig gjør at en webside skiller seg ut. JQuery er fokusert på å lage koding av forskjellige metoder, velgere og animasjon konsis for nettutvikleren. Det er grunnen til at noen av de mest brukte animasjonene er pakket inn i forskjellige funksjoner som kan påberopes når brukeren ønsker. I dag, i dette innlegget, gikk vi over hvordan vi bruker jQuery for å implementere noen av animasjonene \ Effekter på websiden vår.