Introduktion til jQuery Effects

jQuery er et af de mest populære javascript-biblioteker, der er designet til at forenkle HTML DOM, dvs. dokumentobjektmodelleegenskaber såsom manipulation og trækrydsning. Andre egenskaber såsom begivenhedshåndtering, Ajax og CSS-animation er også forenklet. Det er et open source og et gratis bibliotek, der typisk bruges på 73% af de 10 millioner websteder, der bruges i dag. De vigtigste funktioner i jQuery inkluderer DOM-elementbaserede vælgere, manipulation og gennemgang, hvilket gør arbejdet med jQuery meget lettere og praktisk. I dette emne skal vi lære om jQuery Effects.

Det bruges til at give et meget simpelt interface til at udføre forskellige slags fantastiske effekter. Disse metoder giver mulighed for hurtigt at bruge og anvende de mest almindeligt anvendte funktionseffekter sammen med bare til minimale konfigurationer. Kommandoen til at vise og skjule elementer er stort set den samme, som enhver, der er villig til at se dem, ville forvente. Kommando Vis () bruges til at vise elementerne i et helt indpakket sæt og skjule () kommando bruges til at skjule dem.

Forskellige jQuery-effektmetoder:

Her drøfter vi nogle forskellige typer jQuery Effect Methods

1) Animer ()

Den animerede metode bruges til at udføre en brugerdefineret baseret animation til et sæt CSS-egenskaber. Denne metode bruges til at ændre elementets tilstand fra en tilstand til en anden sammen med CSS-stilarter. Egenskabets værdi ændres gradvist, så en animeret effekt kan opnås. Det skal bemærkes, at kun numeriske værdier kunne animeres, såsom marginen: 40px. På den anden side kan værdierne for strenge ikke animeres, såsom baggrundsfarve: grøn. Dette kommer igen med en undtagelse for strenge som showet, skjul og skift.

Syntaks

(selector).animate((styles), duration, easing, callback)

Eksempel

$("label").click(func()(
$("#box").animate((height: "100px"));
));

2) Forsinkelse ()

Som navnet antyder, bruges denne til at indstille forsinkelsen for alle de funktioner, der står i kø på de valgte elementer.

Syntaks

$(selector).delay(duration, NameOfQueue)

Eksempel

$("label").click(func()(
$("#div1").delay("fast").fadeOut();
$("#div2").delay("slow").fadeIn();
));

3) fadeToggle ()

Denne funktion bruges til at skifte mellem fade in og fade out funktioner på forskellige bokse. Hvis noget element falmer ud, kan denne funktion fadeToggle () bruges til at falme dem ind. Elementerne, der er i den skjulte form, vises ikke som en del af denne metode.

Syntaks

$(selector).fadeToggle(duration, easing, callback)

Eksempel

$("label").click(func()(
$("#box").fadeToggle();
));

4) fadeTo ()

Denne metode bruges til at ændre opaciteten af ​​alle

dvs. afsnit relaterede elementer gradvist. Den specificerede opacitet i denne sammenhæng refererer til den skiftende effektophed.

Syntaks

$(selector).fadeTo(duration, opacity, easing, callback)

Eksempel

$("label").click(func()(
$("p").fadeTo(100, 0.9);
));

5) clearQueue ()

Denne metode er den samme som antydet af navnet. Dette bruges til at rydde køen og fjerner alle elementerne fra køen, der ikke er kørt. Funktionen afslutter sin kørsel, når den er begyndt at køre. Dette er relateret til to metoder, dvs. kø () og dequeue ().

Syntaks

$(selector).clearQueue(NameOfQueue)

Eksempel

$("label").click(func()(
$("box").clearQueue();
));

6) finish ()

Denne metode i jQuery bruges til at afslutte eller afslutte den aktuelt kørende animator, da den bruges til at stoppe alle de animationer, der kører i øjeblikket, og bruges til at fjerne alle animerede køer. Det bruges også til at afslutte alle animationer til et varieret udvalg af valgte elementer. Denne metode svarer til metoder såsom .stop, der har begge ægte parametre. Den største forskel mellem denne metode og finish er, at finish-metoden bruges til at stoppe og pause CSS-elementets egenskabstyper for alle animerede køer.

Syntaks

$(selector).finish(NameOfQueue)

Eksempel

$("#complete").click(func()(
$("div1").finish();
));

7) dequeue ()

Denne metode bruges til at fjerne den næste funktion fra køen og bruges derefter til at udføre funktionen. En kø er en eller flere funktioner, der er i pipeline, der venter på at blive kørt. Denne dequeue-metode bruges sammen med kømetoden. Et element kan have flere køer. Fx-køen er den mest almindelige, som også er standardkøen.

Syntaks

$(selector).dequeue(NameOfQueue)

Eksempel

$("label").queue(func()(
$("").css("background-color", "black");
$("div").dequeue();
));

8) slideDown ()

Dette er en anden nyttig metode i jQuery, der bruges til at skubbe ned eller vise de valgte lister over elementer. Det punkt, der skal bemærkes her, er, at det også fungerer på de elementer, der er i skjult format, og displaytypen vises som ingen i tilfælde af CSS, men synligheden behøver ikke at være skjult.

Syntaks

$(selector). slideDown (duration, easing, callback)

Eksempel

$("label").queue(func()(
$("p").slideDown();
));

9) slideUp ()

Metoden slideUp () bruges til at skjule alle

valgte elementer. Elementerne, der er i den skjulte form, vises slet ikke. Dette påvirker derfor ikke sidens layout.

Syntaks

$(selector).slideUp(duration, easing, callback)

Eksempel

$("label").queue(func()(
$("p").slideUp();
));

10) slideDown ()

I modsætning til metoden slideUp () bruges denne metode til at vise alt skjult

elementer. Denne slidedown () -metode fungerer på alle elementer, der også er relateret til de skjulte metoder i tilfælde af jQuery-metoder, og navnet vises også i CSS, men synligheden er ikke skjult.

Syntaks

$(selector).slideDown(duration, easing, callback)

Eksempel

$("label").queue(func()(
$("p").slideDown();
));

11) Skift ()

Denne metode bruges til at skifte mellem show og skjul for forskellige

baserede elementer. Denne metode bruges til at kontrollere, om elementerne er synlige. Metoden show () bruges til at køre, selv når elementet er skjult. Hide () køres, selv når elementet er synligt. Både viser og skjuler metoder i kombination skaber en skifteeffekt, og derfor skifter metoden ().

Syntaks

$(selector).toggle(duration, easing, callback)

Eksempel

$("label").queue(func()(
$("p").toggle();
));

12) slideToggle ()

Denne metode bruges til at skifte mellem slideUp () og slideDown () -funktionerne for alle elementer baseret på afsnittet. Denne metode bruges til at kontrollere de elementer, der er valgt for synlighed. SlideDown () er den funktion, der kan ses, når elementet er skjult. I modsætning hertil er elementet slideUp () det, der skal køres, hvis elementet er synligt.

Syntaks

$(selector).slideToggle(duration, easing, callback)

Eksempel

$("label").queue(func()(
$("p").slideToggle();
));

jQuery giver os mulighed for at tilføje effekterne på websiden ved at tilvejebringe adskillige mængder funktioner, der kan sættes på forskellige vælgere. Det er over dig, hvordan du ønsker at få dine websteder til at se mere effektfulde ud. Håber du har ønsket vores artikel. Hold øje med vores blog for flere artikler som disse.

Anbefalede artikler

Dette er en guide til jQuery Effects. Her har vi drøftet de forskellige typer jQuery Effects Methods med syntaks og eksempel. Du kan også se på den følgende artikel for at lære mere -

  1. Brug af JQuery
  2. jQuery-alternativer
  3. MySQL Query-kommandoer
  4. Hvad er proceduren i SQL?
  5. jQuery querySelector

Kategori:

Softwareudvikling