Uvod u jQuery efekte

jQuery je jedna od najpopularnijih JavaScript biblioteka koja je osmišljena da pojednostavi HTML DOM, tj. svojstva modela dokumenta kao što su manipulacija i prelazak stabla. Ostala svojstva kao što su rukovanje događajima, Ajax i CSS animacija također su pojednostavljena. To je open-source i besplatna biblioteka koja se obično koristi u 73% od 10 milijuna web stranica koje se danas koriste. Temeljne značajke jQuery-a uključuju DOM-ove selektore, manipulaciju i prolazak, što rad na jQuery-ju čini lakšim i praktičnijim. U ovoj ćemo temi upoznati jQuery efekte.

Koristi se za pružanje vrlo jednostavnog sučelja za stvaranje različitih vrsta nevjerojatnih efekata. Ove metode omogućuju brzo korištenje i primjenu najčešće korištenih značajki-efekata, zajedno s golim ili minimalnim konfiguracijama. Naredba za prikazivanje i skrivanje elemenata prilično je jednaka onome što bi ih očekivao bilo tko. Naredba show () koristi se za prikazivanje elemenata u potpuno zamotanom skupu, a za skrivanje ih koristi naredba hidriraj ().

Različite metode jQuery efekta:

Ovdje smo raspravljali o nekim različitim vrstama metoda jQuery efekta

1) Animirani ()

Animirana metoda koristi se za izvođenje prilagođene animacije za skup CSS svojstava. Ova metoda se koristi za promjenu stanja elementa iz jednog stanja u drugo zajedno sa CSS stilovima. Vrijednost svojstva mijenja se postupno tako da se može postići animirani efekt. Ono što treba napomenuti jest da se mogu animirati samo numeričke vrijednosti poput marže: 40px. S druge strane, vrijednosti za žice ne mogu se animirati kao što je boja pozadine: zelena. Ovo opet dolazi s iznimkom za žice poput show, skrivanje i prebacivanje.

Sintaksa

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

Primjer

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

2) Odgoda ()

Kao što ime sugerira, ovaj se koristi za postavljanje kašnjenja za sve funkcije koje su postavljene na red na odabranim elementima.

Sintaksa

$(selector).delay(duration, NameOfQueue)

Primjer

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

3) fadeToggle ()

Ova se funkcija koristi za prebacivanje između funkcija za smanjivanje i uklanjanje u različitim okvirima. Ako bilo koji element izblijedi, tada se ova funkcija fadeToggle () može upotrijebiti za njihovo uklanjanje. Elementi koji su u skrivenom obliku neće se prikazivati ​​kao dio ove metode.

Sintaksa

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

Primjer

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

4) fadeTo ()

Ova se metoda koristi za promjenu neprozirnosti svih

tj. Postupno povezani elementi. Navedena neprozirnost u ovom se kontekstu odnosi na neprozirnost promjene.

Sintaksa

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

Primjer

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

5) clearQueue ()

Ova je metoda ista kao što je sugerirano iz naziva. Koristi se za brisanje reda i uklanja sve stavke iz reda koje nisu pokrenute. Funkcija će dovršiti njegovo pokretanje nakon što se pokrene. To se odnosi na dvije metode viz. red () i dequeue ().

Sintaksa

$(selector).clearQueue(NameOfQueue)

Primjer

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

6) završiti ()

Ova metoda u jQuery koristi se za završetak ili dovršavanje trenutno pokrenutog animatora jer se koristi za zaustavljanje svih animacija koje se trenutno izvode i koristi se za uklanjanje svih animacija iz čekanja. Također se koristi za dovršavanje svih animacija za raznolik raspon odabranih elemenata. Ova je metoda slična metodama kao što je .stop koji ima oba istinska parametra. Glavna razlika između ove metode i cilja je ta što se metoda završetka koristi za zaustavljanje i pauziranje vrsta svojstava CSS elemenata svih animacija iz čekanja.

Sintaksa

$(selector).finish(NameOfQueue)

Primjer

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

7) dequeue ()

Ova metoda se koristi za uklanjanje sljedeće funkcije iz reda čekanja, a zatim se koristi za izvršavanje funkcije. Red čekanja je jedna ili više funkcija koje čekaju na pokretanje. Ova metoda dequeue koristi se zajedno s metodom čekanja. Jedan element može imati nekoliko redova. Fx red najčešći je i zadani red.

Sintaksa

$(selector).dequeue(NameOfQueue)

Primjer

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

8) slideDown ()

Ovo je još jedna korisna metoda u jQuery-u koja se koristi za pomicanje prema dolje ili za prikaz odabranih popisa elemenata. Ovdje treba istaknuti to da djeluje i na elemente koji su u skrivenom formatu, a vrsta prikaza je prikazana kao nijedna u slučaju CSS-a, ali vidljivost neće morati biti skrivena.

Sintaksa

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

Primjer

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

9) slideUp ()

Metoda slideUp () koristi se za skrivanje svih

odabrani elementi. Elementi koji su u skrivenom obliku neće se uopće prikazati. To, dakle, ne utječe na izgled stranice.

Sintaksa

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

Primjer

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

10) slideDown ()

Suprotno metodi slideUp (), ova metoda se koristi za prikaz svih skrivenih

elementi. Ova metoda slidedown () djeluje na sve elemente koji su također povezani sa skrivenim metodama u slučaju jQuery metoda, a naziv je također prikazan u CSS-u, ali vidljivost nije skrivena.

Sintaksa

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

Primjer

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

11) Prebaci ()

Ova se metoda koristi za prebacivanje između prikaza i skrivanja raznih

temeljeni elementi. Ova metoda se koristi za provjeru vidljivosti elemenata. Metoda show () koristi se za pokretanje čak i kad je element skriven. Hide () se izvodi i kad je element vidljiv. Oba načina prikazivanja i sakrivanja u kombinaciji stvaraju efekt prebacivanja, a samim tim i metoda toggle ().

Sintaksa

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

Primjer

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

12) slideToggle ()

Ova se metoda koristi za prebacivanje između funkcije slideUp () i slideDown () za sve elemente na temelju stavka. Ova metoda se koristi za provjeru elemenata koji su odabrani zbog vidljivosti. SlideDown () je funkcija koja se može vidjeti kada je element skriven. Suprotno tome, element slideUp () je onaj koji treba pokrenuti ako je element vidljiv.

Sintaksa

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

Primjer

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

jQuery nam omogućuje dodavanje efekata na web stranici pružanjem brojnih količina funkcija koje se mogu staviti na različite odabire. Na vama je kako želite da vaše web stranice izgledaju ispunjenije učinkom. Nadam se da vam se svidio naš članak. Pratite naš blog za više ovih članaka.

Preporučeni članci

Ovo je vodič za jQuery efekte. Ovdje smo raspravljali o različitim vrstama jQuery efekata sa sintaksom i primjerom. Možete pogledati i sljedeći članak da biste saznali više -

  1. Koristi JQuery
  2. jQuery alternative
  3. Naredbe za upite MySQL
  4. Što je procedura u SQL-u?
  5. jQuery upitSelector

Kategorija:

Razvoj softvera