JQuery efektide tutvustus

jQuery on üks populaarsemaid javascripti teeke, mille eesmärk on lihtsustada HTML DOM-i, st dokumendiobjekti mudeli omadusi nagu manipuleerimine ja puu liikumine. Lihtsustatud on ka muud omadused, näiteks sündmuste käsitlemine, Ajaxi ja CSS-i animatsioon. See on avatud lähtekoodiga ja tasuta raamatukogu, mida tavaliselt kasutatakse 73% -l tänapäeval kasutatavast 10 miljonist veebisaidist. JQuery põhifunktsioonide hulka kuuluvad DOM-elemendipõhised valijad, manipuleerimine ja läbikäik, mis teeb jQuery-ga töötamise palju lihtsamaks ja mugavamaks. Selles teemas õpime tundma jQuery Effectsi.

Seda kasutatakse väga lihtsa välimusega liidese pakkumiseks mitmesuguste hämmastavate efektide tegemiseks. Need meetodid võimaldavad kiiresti kasutada ja rakendada kõige sagedamini kasutatavaid funktsioone-efekte koos minimaalsete konfiguratsioonidega. Elementide kuvamise ja peitmise käsk on üsna sama, mida kõik, kes neid näha tahavad, võiksid oodata. Käsu Show () kasutatakse elementide kuvamiseks täielikult mähitud komplektis ja käsu hide () abil peidetakse neid.

Erinevad jQuery efekti meetodid:

Siin käsitleme mõnda erinevat tüüpi jQuery efekti meetodit

1) Animeeri ()

Animeerimismeetodit kasutatakse kohandatud põhise animatsiooni tegemiseks CSS-i omaduste komplekti jaoks. Seda meetodit kasutatakse elemendi oleku muutmiseks ühest olekust teise koos CSS-i stiilidega. Vara väärtust muudetakse järk-järgult nii, et oleks võimalik saavutada animeeritud efekt. Märkimist väärib see, et animeerida sai ainult arvväärtusi, näiteks veeris: 40 pikslit. Teisest küljest ei saa stringide väärtusi animeerida, näiteks taustavärv: roheline. See tuleb jällegi välja selliste keelpillide puhul nagu näitamine, peitmine ja lülitamine.

Süntaks

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

Näide

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

2) viivitus ()

Nagu nimigi ütleb, kasutatakse seda viivituse seadmiseks kõigi funktsioonide jaoks, mis on valitud elementide järjekorda pandud.

Süntaks

$(selector).delay(duration, NameOfQueue)

Näide

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

3) fadeToggle ()

Seda funktsiooni kasutatakse erinevates kastides sisse- ja väljalülitamise funktsioonide vahel ümberlülitamiseks. Kui mõni element hääbub, saab seda funktsiooni fadeToggle () kasutada nende sisendamiseks. Varjatud kujul olevaid elemente selle meetodi osana ei kuvata.

Süntaks

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

Näide

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

4) fadeTo ()

Seda meetodit kasutatakse kõigi klaaside läbipaistmatuse muutmiseks

st lõikudega seotud elemendid järk-järgult. Täpsustatud läbipaistmatus viitab selles kontekstis efekti läbipaistvuse muutumisele.

Süntaks

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

Näide

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

5) clearQueue ()

See meetod on sama, mida nimi soovitab. Seda kasutatakse järjekorra tühjendamiseks ja eemaldatakse järjekorrast kõik üksused, mida pole käivitatud. Funktsioon viib käitamise lõpule pärast selle käivitamist. See on seotud kahe meetodiga, nimelt. järjekorda () ja dequeue ().

Süntaks

$(selector).clearQueue(NameOfQueue)

Näide

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

6) viimistlus ()

Seda jQuery meetodit kasutatakse praegu töötava animaatori lõpetamiseks või lõpetamiseks, kuna seda kasutatakse kõigi praegu töötavate animatsioonide peatamiseks ja kõigi järjekorras olevate animatsioonide eemaldamiseks. Seda kasutatakse ka kõigi animatsioonide lõpuleviimiseks valitud elementide mitmekesise valiku korral. See meetod sarnaneb selliste meetoditega nagu .stop, millel on mõlemad tõelised parameetrid. Selle meetodi ja viimistluse peamine erinevus on see, et viimistlusmeetodit kasutatakse kõigi järjekorras olevate animatsioonide CSS-i elemendi atribuutide tüüpide peatamiseks ja peatamiseks.

Süntaks

$(selector).finish(NameOfQueue)

Näide

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

7) dequeue ()

Seda meetodit kasutatakse järgmise funktsiooni eemaldamiseks järjekorrast ja seejärel funktsiooni täitmiseks. Järjekord on üks või mitu funktsiooni, mis on ettevalmistamisel ootamist. Seda aeglustusmeetodit kasutatakse koos järjekorra meetodiga. Ühel elemendil võib olla mitu järjekorda. Fx-järjekord on kõige tavalisem, mis on ka vaikejärjekord.

Süntaks

$(selector).dequeue(NameOfQueue)

Näide

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

8) slideDown ()

See on veel üks jQuery kasulik meetod, mida kasutatakse valitud elementide loendite allapoole libistamiseks või kuvamiseks. Siinkohal tuleb märkida, et see töötab ka varjatud vormingus elementidel ja CSS-i puhul kuvatakse ekraanitüübina mitte ühtegi, kuid nähtavus ei pea olema peidetud.

Süntaks

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

Näide

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

9) slideUp ()

SlideUp () meetodit kasutatakse kõigi failide peitmiseks

valitud elemendid. Varjatud kujul olevaid elemente ei kuvata üldse. Seetõttu ei mõjuta see lehe paigutust.

Süntaks

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

Näide

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

10) slideDown ()

Vastupidiselt meetodile slideUp () kasutatakse seda meetodit kõigi peidetud näitamiseks

elemente. See libistatud () meetod töötab kõigi elementide puhul, mis on jQuery meetodite puhul seotud ka varjatud meetoditega ning nimi kuvatakse ka CSS-is, kuid nähtavus pole peidetud.

Süntaks

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

Näide

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

11) Lülita sisse ()

Seda meetodit kasutatakse mitmesuguste kuvamise ja peitmise vahetamiseks

põhinevad elemendid. Seda meetodit kasutatakse elementide nähtavuse kontrollimiseks. Show () meetodit kasutatakse jooksmiseks ka siis, kui element on peidetud. Peida () käitatakse isegi siis, kui element on nähtav. Mõlemad meetodid koos näitamise ja peitmisega loovad ümberlülitusefekti ja seetõttu meetodi ümberlülitamiseks ().

Süntaks

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

Näide

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

12) slideToggle ()

Seda meetodit kasutatakse kõigi lõigul põhinevate elementide slideUp () ja slideDown () vahel ümberlülitamiseks. Seda meetodit kasutatakse valitud elementide nähtavuse kontrollimiseks. SlideDown () on funktsioon, mida võib näha töötavana, kui element on peidetud. Vastupidiselt sellele peaks element slideUp () käima, kui element on nähtav.

Süntaks

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

Näide

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

jQuery võimaldab meil lisada efekte veebilehele, pakkudes hulgaliselt funktsioone, mida saab panna erinevatele valijatele. Just teie otsustada, kuidas muuta oma veebisaidid efektilisemaks. Loodetavasti teile meeldis meie artikkel. Olge kursis meie ajaveebiga, et saada rohkem selliseid artikleid.

Soovitatavad artiklid

See on jQuery Effectsi juhend. Siin on arutatud erinevaid jQuery efektide meetodite süntaksi ja näite abil. Lisateabe saamiseks võite vaadata ka järgmist artiklit -

  1. JQuery kasutusalad
  2. jQuery Alternatiivid
  3. MySQL päringu käsud
  4. Mis on protseduur SQL-is?
  5. jQuery querySelector

Kategooria:

Tarkvaraarendus