Introduksjon til jQuery Effects
jQuery er et av de mest populære javascript-bibliotekene som er designet for å forenkle HTML DOM, dvs. dokumentobjektmodellegenskaper som manipulering og treovergang. Andre egenskaper som hendelseshåndtering, Ajax og CSS-animasjon er også forenklet. Det er en åpen kildekode og et gratis bibliotek som vanligvis brukes på 73% av de 10 millioner nettstedene som brukes i dag. Kjernefunksjonene til jQuery inkluderer DOM-elementbaserte velgere, manipulering og gjennomgang som gjør arbeidet med jQuery mye enklere og praktisk. I dette emnet skal vi lære om jQuery Effects.
Det brukes til å gi et veldig enkelt utseende grensesnitt for å gjøre forskjellige slags fantastiske effekter. Disse metodene gjør det mulig å raskt bruke og bruke de mest brukte funksjoner-effekter sammen med bare til minimale konfigurasjoner. Kommandoen for å vise og skjule elementer er stort sett den samme som alle som er villige til å se dem forvente. Vis () -kommando brukes til å vise elementene i et fullstendig innpakket sett og skjule () -kommando brukes til å skjule dem.
Ulike metoder for jQuery Effect:
Her diskuterer vi noen forskjellige typer jQuery Effect Methods
1) Animer ()
Den animerte metoden brukes til å utføre en tilpasset basert animasjon for et sett med CSS-egenskaper. Denne metoden brukes til å endre tilstanden til elementet fra en tilstand til en annen sammen med CSS-stiler. Eiendomsverdien endres gradvis slik at en animert effekt kan oppnås. Det som skal bemerkes er at bare numeriske verdier kan animeres, for eksempel marginen: 40px. På den annen side kan ikke verdiene for strengene animeres, for eksempel bakgrunnsfarge: grønn. Dette kommer igjen med et unntak for strenger som showet, skjule og veksle.
syntax
(selector).animate((styles), duration, easing, callback)
Eksempel
$("label").click(func()(
$("#box").animate((height: "100px"));
));
2) Forsinkelse ()
Som navnet antyder, brukes denne til å stille inn forsinkelsen for alle funksjonene som står i kø på de valgte elementene.
syntax
$(selector).delay(duration, NameOfQueue)
Eksempel
$("label").click(func()(
$("#div1").delay("fast").fadeOut();
$("#div2").delay("slow").fadeIn();
));
3) fadeToggle ()
Denne funksjonen brukes til å veksle mellom fade in og fade out funksjoner på forskjellige bokser. Hvis noe element blekner, kan denne funksjonen fadeToggle () brukes til å fade dem inn. Elementene som er i skjult form vil ikke vises som en del av denne metoden.
syntax
$(selector).fadeToggle(duration, easing, callback)
Eksempel
$("label").click(func()(
$("#box").fadeToggle();
));
4) fadeTo ()
Denne metoden brukes til å endre opaciteten til alle
dvs. avsnittrelaterte elementer gradvis. Den spesifiserte opaciteten i denne sammenhengen refererer til den endrede effekten uklarhet.
syntax
$(selector).fadeTo(duration, opacity, easing, callback)
Eksempel
$("label").click(func()(
$("p").fadeTo(100, 0.9);
));
5) clearQueue ()
Denne metoden er den samme som antydet av navnet. Dette brukes til å tømme køen og fjerner alle elementene fra køen som ikke er kjørt. Funksjonen fullfører løpingen når den har startet. Dette er relatert til to metoder, nemlig. kø () og dequeue ().
syntax
$(selector).clearQueue(NameOfQueue)
Eksempel
$("label").click(func()(
$("box").clearQueue();
));
6) finish ()
Denne metoden i jQuery brukes til å avslutte eller fullføre den for tiden kjørende animatoren, da den brukes til å stoppe alle animasjonene som for tiden kjører, og brukes til å fjerne alle animerte køer. Det brukes også til å fullføre alle animasjonene for et variert utvalg av valgte elementer. Denne metoden ligner metoder som .stop som har begge sanne parametere. Den største forskjellen mellom denne metoden og finishen er at etterbehandlingsmetoden brukes til å stoppe og pause CSS-elementegenskapstypene til alle animasjonene i kø.
syntax
$(selector).finish(NameOfQueue)
Eksempel
$("#complete").click(func()(
$("div1").finish();
));
7) dequeue ()
Denne metoden brukes til å fjerne neste funksjon fra køen, og blir deretter brukt til å utføre funksjonen. En kø er en eller flere funksjoner som er i rørledningen som venter på å bli kjørt. Denne dequeue-metoden brukes sammen med kømetoden. Ett element kan ha flere køer. Fx-køen er den vanligste som også er standardkøen.
syntax
$(selector).dequeue(NameOfQueue)
Eksempel
$("label").queue(func()(
$("").css("background-color", "black");
$("div").dequeue();
));
8) slideDown ()
Dette er en annen nyttig metode i jQuery som brukes til å skyve ned eller vise de valgte elementelistene. Poenget som skal bemerkes her er at det også fungerer på elementene som er i skjult format, og skjermtypen vises som ingen når det gjelder CSS, men synligheten trenger ikke å være skjult.
syntax
$(selector). slideDown (duration, easing, callback)
Eksempel
$("label").queue(func()(
$("p").slideDown();
));
9) slideUp ()
SlideUp-metoden brukes til å skjule alle
valgte elementer. Elementene som er i skjult form vises ikke i det hele tatt. Dette påvirker derfor ikke oppsettet på siden.
syntax
$(selector).slideUp(duration, easing, callback)
Eksempel
$("label").queue(func()(
$("p").slideUp();
));
10) slideDown ()
I motsetning til metoden slideUp () brukes denne metoden for å vise alt skjult
elementer. Denne slidedown-metoden fungerer på alle elementene som også er relatert til de skjulte metodene når det gjelder jQuery-metoder, og navnet vises også i CSS, men synligheten er ikke skjult.
syntax
$(selector).slideDown(duration, easing, callback)
Eksempel
$("label").queue(func()(
$("p").slideDown();
));
11) Veksle ()
Denne metoden brukes til å veksle mellom show og skjul for forskjellige
baserte elementer. Denne metoden brukes til å sjekke om elementene er synlige. Show () -metoden brukes til å kjøre selv når elementet er skjult. Hide () kjøres selv når elementet er synlig. Både viser og skjuler metoder i kombinasjon skaper en veksleeffekt og derfor veksler metoden ().
syntax
$(selector).toggle(duration, easing, callback)
Eksempel
$("label").queue(func()(
$("p").toggle();
));
12) slideToggle ()
Denne metoden brukes til å veksle mellom slideUp () og slideDown () -funksjonene for alle elementene basert på avsnittet. Denne metoden brukes til å sjekke elementene som er valgt for synlighet. SlideDown () er funksjonen som kan sees når den er skjult. I kontrast er slideUp () -elementet det som skal kjøres hvis elementet er synlig.
syntax
$(selector).slideToggle(duration, easing, callback)
Eksempel
$("label").queue(func()(
$("p").slideToggle();
));
jQuery gjør det mulig for oss å legge til effektene på websiden ved å tilby mange mengder funksjoner som kan settes på forskjellige velgere. Det er på deg hvordan du ønsker å gjøre nettstedene dine mer effektive. Håper du har likt artikkelen vår. Følg med på bloggen vår for flere artikler som disse.
Anbefalte artikler
Dette er en guide til jQuery Effects. Her har vi diskutert de forskjellige typene jQuery Effects Methods med syntaks og eksempel. Du kan også se på følgende artikkel for å lære mer -
- Bruk av JQuery
- jQuery-alternativer
- MySQL Query-kommandoer
- Hva er prosedyre i SQL?
- jQuery querySelector