Introducere în efectele jQuery
jQuery este una dintre cele mai populare biblioteci javascript care este concepută pentru a simplifica DOM HTML, adică proprietățile modelului obiectului de document, cum ar fi manipularea și traversarea arborelui. Alte proprietăți, cum ar fi gestionarea de evenimente, animația Ajax și CSS sunt de asemenea simplificate. Este o bibliotecă open-source și o bibliotecă gratuită, care este de obicei folosită în 73% din cele 10 milioane de site-uri web utilizate astăzi. Caracteristicile de bază ale jQuery includ selectori pe bază de elemente DOM, manipulare și traversare, ceea ce face ca lucrul la jQuery să fie mult mai ușor și mai comod. În acest subiect, vom afla despre efectele jQuery.
Este folosit pentru a oferi o interfață foarte simplă pentru a efectua diferite tipuri de efecte uimitoare. Aceste metode permit utilizarea rapidă și aplicarea efectelor de funcții utilizate cel mai des, împreună cu configurațiile bare până la minime. Comanda pentru afișarea și ascunderea elementelor este cam aceeași la ceea ce ar aștepta oricine dorește să le vadă. Comanda Show () este utilizată pentru a arăta elementele dintr-un set complet învelit și comanda hide () este utilizată pentru a le ascunde.
Diferite metode de efect jQuery:
Aici discutăm câteva tipuri diferite de metode de efect jQuery
1) Animați ()
Metoda animare este utilizată pentru a efectua o animație bazată pe un set de proprietăți CSS. Această metodă este utilizată pentru a schimba starea elementului de la o stare la alta, împreună cu stilurile CSS. Valoarea proprietății este modificată treptat, astfel încât se poate obține un efect animat. Lucrul de remarcat este că numai valorile numerice pot fi animate, cum ar fi marja: 40px. Pe de altă parte, valorile pentru șiruri nu pot fi animate, cum ar fi culoarea de fundal: verde. Acest lucru vine din nou cu o excepție pentru șiruri precum spectacolul, ascunderea și comutarea.
Sintaxă
(selector).animate((styles), duration, easing, callback)
Exemplu
$("label").click(func()(
$("#box").animate((height: "100px"));
));
2) Întârziere ()
După cum sugerează și denumirea, aceasta este utilizată pentru a seta întârzierea pentru toate funcțiile alese la elementele selectate.
Sintaxă
$(selector).delay(duration, NameOfQueue)
Exemplu
$("label").click(func()(
$("#div1").delay("fast").fadeOut();
$("#div2").delay("slow").fadeIn();
));
3) fadeToggle ()
Această funcție este folosită pentru a comuta între funcțiile de estompare și estompare pe diferite cutii. Dacă vreun element se estompează, atunci această funcție fadeToggle () poate fi utilizată pentru a le estompa. Elementele care sunt în forma ascunsă nu vor fi afișate ca parte a acestei metode.
Sintaxă
$(selector).fadeToggle(duration, easing, callback)
Exemplu
$("label").click(func()(
$("#box").fadeToggle();
));
4) fadeTo ()
Această metodă este utilizată pentru a schimba opacitatea tuturor
adică elementele legate de paragraf treptat. Opacitatea specificată în acest context se referă la opacitatea efectului schimbător.
Sintaxă
$(selector).fadeTo(duration, opacity, easing, callback)
Exemplu
$("label").click(func()(
$("p").fadeTo(100, 0.9);
));
5) clearQueue ()
Această metodă este aceeași cu cea sugerată de nume. Acesta este folosit pentru a șterge coada și a elimina toate elementele din coadă care nu au fost rulate. Funcția își va completa rularea odată ce a început să funcționeze. Aceasta este legată de două metode, adică. coadă () și dequeue ().
Sintaxă
$(selector).clearQueue(NameOfQueue)
Exemplu
$("label").click(func()(
$("box").clearQueue();
));
6) finisaj ()
Această metodă din jQuery este folosită pentru a încheia sau a termina animatorul care rulează în prezent, deoarece este utilizată pentru a opri toate animațiile care se execută în prezent și este utilizată pentru a elimina toate animațiile în coadă. De asemenea, este utilizat pentru a completa toate animațiile pentru o gamă variată de elemente selectate. Această metodă este similară cu metodele precum .stop care are ambii parametri adevărați. Diferența majoră dintre această metodă și finisare este că metoda de finisare este utilizată pentru a opri și întrerupe tipurile de proprietăți ale elementului CSS din toate animațiile în coadă.
Sintaxă
$(selector).finish(NameOfQueue)
Exemplu
$("#complete").click(func()(
$("div1").finish();
));
7) dequeue ()
Această metodă este utilizată pentru a elimina următoarea funcție din coadă și este apoi utilizată pentru a executa funcția. O coadă este una sau mai multe funcții care sunt în conductă așteaptă să fie rulate. Această metodă de eliminare este utilizată alături de metoda cozii. Un element poate avea mai multe cozi. Fx coada este cea mai comună, care este, de asemenea, coada implicită.
Sintaxă
$(selector).dequeue(NameOfQueue)
Exemplu
$("label").queue(func()(
$("").css("background-color", "black");
$("div").dequeue();
));
8) slideDown ()
Aceasta este o altă metodă utilă în jQuery, care este utilizată pentru a glisa în jos sau pentru a afișa listele selectate de elemente. Ideea de remarcat aici este că funcționează și pe elementele care sunt în format ascuns, iar tipul de afișare este afișat ca nici unul în cazul CSS, dar vizibilitatea nu va trebui ascunsă.
Sintaxă
$(selector). slideDown (duration, easing, callback)
Exemplu
$("label").queue(func()(
$("p").slideDown();
));
9) slideUp ()
Metoda slideUp () este utilizată pentru a ascunde toate
elemente selectate Elementele care sunt sub formă ascunsă nu vor fi afișate deloc. Prin urmare, acest lucru nu afectează aspectul paginii.
Sintaxă
$(selector).slideUp(duration, easing, callback)
Exemplu
$("label").queue(func()(
$("p").slideUp();
));
10) slideDown ()
Spre deosebire de metoda slideUp (), această metodă este utilizată pentru a arăta toate cele ascunse
elemente. Această metodă glisată () funcționează pe toate elementele care sunt, de asemenea, legate de metodele ascunse în cazul metodelor jQuery, iar numele este afișat și în CSS, dar vizibilitatea nu este ascunsă.
Sintaxă
$(selector).slideDown(duration, easing, callback)
Exemplu
$("label").queue(func()(
$("p").slideDown();
));
11) Comutare ()
Această metodă este folosită pentru a comuta între afișarea și ascunderea diferitelor
elemente bazate pe Această metodă este utilizată pentru a verifica vizibilitatea elementelor. Metoda show () este utilizată pentru a rula chiar și atunci când elementul este ascuns. Hide () este rulat chiar și atunci când elementul este vizibil. Ambele metode arată și ascund în combinație creează un efect de comutare și, prin urmare, metoda comută ().
Sintaxă
$(selector).toggle(duration, easing, callback)
Exemplu
$("label").queue(func()(
$("p").toggle();
));
12) slideToggle ()
Această metodă este utilizată pentru a comuta între funcțiile slideUp () și slideDown () pentru toate elementele bazate pe paragraf. Această metodă este utilizată pentru a verifica elementele selectate pentru vizibilitate. SlideDown () este funcția care poate fi văzută rulând atunci când elementul este ascuns. În schimb, elementul slideUp () este cel care ar trebui să fie rulat dacă elementul este vizibil.
Sintaxă
$(selector).slideToggle(duration, easing, callback)
Exemplu
$("label").queue(func()(
$("p").slideToggle();
));
jQuery ne permite să adăugăm efectele pe pagina web, oferind numeroase funcții care pot fi puse pe diferite selectoare. Vă rog, cum doriți să faceți site-urile dvs. web să pară mai pline de efect. Sper că v-a plăcut articolul nostru. Rămâneți la curent cu blogul nostru pentru mai multe articole ca acestea.
Articole recomandate
Acesta este un ghid pentru efectele jQuery. Aici am discutat despre diferitele tipuri de metode de efecte jQuery cu sintaxă și exemplu. De asemenea, puteți consulta articolul următor pentru a afla mai multe -
- Utilizări ale JQuery
- jQuery alternative
- Comenzi de interogare MySQL
- Ce este Procedura în SQL?
- jQuery querySelector