JQuery glidemetoder forklart

Skliftfenomenet lar deg gli opp eller skyve ned Dom -elementer. Noen ganger er et panel vedlagt med elementer som gir tilleggsinformasjon. Disse panelene er sklidd opp/ned avhengig av kravet.

JQuery støtter tre glidemetoder som er Slideup (), Slidedown () og Slidetoggle (). SLIDUP () eller Slidedown () -metodene skyver elementene i henholdsvis oppover eller nedover retning. Alternativt avgjør metoden SlideToggle () om elementet er i Slideup () -staten eller i Slidedown (). For eksempel, hvis elementet er i Slideup () -tilstanden, vil Slidetoggle () skyve elementet nedover og omvendt.

Denne artikkelen demonstrerer jQuery glidemetodene i detalj og tjener følgende læringsresultater.

• Working of Slideup (), Slidedown () og Slidetoggle () metoder
• Demonstrasjon av glidemetoder for jQuery

Hvordan glidemetoder for jQuery fungerer

Denne delen gir arbeidsmekanismen for glidemetoder for jQuery ved å utdype syntaksene. I tillegg er det gitt et eksempel som refererer til hver jQuery -metode separat. La oss utforske glidemetoder for jQuery.

Hvordan bruke SLIDUP () -metoden

Denne metoden skyver elementet oppover ved hjelp av jQuery Slideup ().

Syntaks

$ (velger).Slideup (hastighet, tilbakeringing);

I syntaks ovenfor,

• de velger kan være ethvert element eller kan referere til klasse/id av et element
• de hastighetsparameter bestemmer hvor raskt/sakte elementet vil bli glidet opp og verdiene til hastighet kan være langsom, rask eller millisekunder (numerisk verdi)
• de Ring tilbake er valgfritt og brukes til å få noe utgang etter at glidet er fullført

Eksempel

Følgende linjer med kodepraksis JQuery Slideup () -metoden.

Koden er forklart her

• “prim”Klasse refererer til hovedpanelet (som glidet er avhengig av)
• “sek”Klasse brukes til sekundærpanelet (som vil bli sklidd opp)
• skyvehastigheten er satt til “fort“

Produksjon

Før du skled opp

Etter å ha gli i retning oppover

Hvordan bruke SLIDEDOWN () -metoden

SLIDEDOWN () -metoden skyver elementet i nedadgående retning.

Syntaks

$ (velger).Slidedown (hastighet, tilbakeringing);

Eksempel

Bruken av JQuery Slidedown () -metoden vises ved å utøve følgende kode.

Ovennevnte kode er beskrevet som,

• “.hoved-”Avsnittsklasse opprettes og den brukes som et primært element (brukes til å gli nedover panelet)
• “.sek”Henviser til et annet avsnitt som vil bli sklidd ned etter å ha klikket på“.hoved-”Klasseavsnitt
• Skyvhastigheten er satt til langsom

Merk: Elementet som vil bli sklidd ned, må ha visningsegenskapen satt til ingen.

Produksjon

Før du glir ned

Ved å klikke, avsnittet (klasse = ”sek“) Vil bli sklidd ned som vist nedenfor.

Hvordan bruke SLIDETOGGLE () -metoden

Slidetoggle () glir opp elementet hvis elementet er i en glidende tilstand, og hvis elementet er i en lysbilde-tilstand, vil det gli elementet i en nedadgående retning.

Syntaks

$ (velger).Slidetoggle (hastighet, tilbakeringing);

Eksempel

For å øve på JQuery Slidetoggle () -metoden, benyttet vi oss av følgende kode.

I koden ovenfor,

• “prim”Klasse representerer det primære elementet (som glidet er avhengig av)
• “sek”Klasse refererer til elementet som vil bli glidet opp/ned
• de skyve hastighet er satt i millisekunder (1000)

Produksjon

Før du glir

Etter å ha brukt SlideToggle () -metoden

Hvis du fortsetter å klikke på det primære elementet, vil glidebryteren fortsette å endre tilstanden.

Konklusjon

For å skyve et element i en oppover eller nedover retning, tilbyr JQuery tre metoder: Slidedown (), Slideup () og Slidetoggle (). Dette beskrivende innlegget gir arbeid og bruk av hver glidemetode. SLIDEDOWN () og Slideup () -metodene utøves for å skyve elementet i henholdsvis nedadgående og oppadgående retninger. På den annen side endrer metoden SlideToggle () den nåværende tilstanden til elementet fra glide til glide og omvendt og omvendt.