Úvod do jQuery efektov
jQuery je jednou z najpopulárnejších knižníc javascript, ktoré sú navrhnuté tak, aby zjednodušili HTML DOM, tj vlastnosti modelu objektu dokumentu, ako sú manipulácia a stromový priechod. Zjednodušené sú aj ďalšie vlastnosti, ako je spracovanie udalostí, animácia Ajax a CSS. Je to otvorená knižnica a bezplatná knižnica, ktorá sa zvyčajne používa na 73% z 10 miliónov webových stránok, ktoré sa dnes používajú. Medzi hlavné vlastnosti jQuery patria selektory na báze elementov DOM, manipulácia a prechod, čo uľahčuje a uľahčuje prácu na jQuery. V tejto téme sa dozvieme viac o efektoch jQuery.
Používa sa na poskytovanie veľmi jednoduchého rozhrania na vykonávanie rôznych druhov úžasných efektov. Tieto metódy umožňujú rýchle použitie a použitie najbežnejšie používaných funkcií - efektov spolu s holými minimálnymi konfiguráciami. Príkaz na zobrazovanie a skrývanie prvkov je takmer rovnaký, ako by očakával každý, kto ich chce vidieť. Príkaz Show () sa používa na zobrazenie prvkov v úplne zabalenej množine a na skrytie sa používa príkaz hide ().
Rôzne metódy jQuery Effect:
Tu diskutujeme o rôznych druhoch metód jQuery efektov
1) Animovať ()
Metóda animácie sa používa na vykonávanie vlastnej animácie pre skupinu vlastností CSS. Táto metóda sa používa na zmenu stavu prvku z jedného stavu do druhého spolu so štýlmi CSS. Hodnota vlastnosti sa mení postupne tak, aby sa dosiahol animovaný efekt. Treba poznamenať, že animované by mohli byť iba číselné hodnoty, ako napríklad okraj: 40 pixlov. Na druhej strane hodnoty pre reťazce nemôžu byť animované, napríklad farba pozadia: zelená. Toto opäť prichádza s výnimkou pre reťazce, ako je prehliadka, skrytie a prepínanie.
syntax
(selector).animate((styles), duration, easing, callback)
príklad
$("label").click(func()(
$("#box").animate((height: "100px"));
));
2) Oneskorenie ()
Ako už názov napovedá, tento sa používa na nastavenie oneskorenia pre všetky funkcie, ktoré sú zaradené do poradia s vybranými prvkami.
syntax
$(selector).delay(duration, NameOfQueue)
príklad
$("label").click(func()(
$("#div1").delay("fast").fadeOut();
$("#div2").delay("slow").fadeIn();
));
3) fadeToggle ()
Táto funkcia sa používa na prepínanie medzi funkciami stmievania a stmievania v rôznych rámčekoch. Ak niektorý z prvkov zmizne, môže sa na ich zoslabenie použiť táto funkcia fadeToggle (). Prvky, ktoré sú v skrytej podobe, sa nebudú zobrazovať ako súčasť tejto metódy.
syntax
$(selector).fadeToggle(duration, easing, callback)
príklad
$("label").click(func()(
$("#box").fadeToggle();
));
4) fadeTo ()
Táto metóda sa používa na zmenu nepriehľadnosti všetkých
tj postupne súvisiace prvky odseku. Špecifikovaná opacita sa v tomto kontexte vzťahuje na opacitu s meniacim sa účinkom.
syntax
$(selector).fadeTo(duration, opacity, easing, callback)
príklad
$("label").click(func()(
$("p").fadeTo(100, 0.9);
));
5) clearQueue ()
Táto metóda je rovnaká, ako navrhuje názov. Používa sa na vymazanie frontu a odstráni všetky položky z frontu, ktoré ešte neboli spustené. Táto funkcia dokončí svoje spustenie, keď sa spustí. Súvisí to s dvomi metódami, t. fronty () a dequeue ().
syntax
$(selector).clearQueue(NameOfQueue)
príklad
$("label").click(func()(
$("box").clearQueue();
));
6) cieľ ()
Táto metóda v jQuery sa používa na ukončenie alebo dokončenie aktuálne bežiaceho animátora, pretože sa používa na zastavenie všetkých animácií, ktoré sú aktuálne spustené, a na odstránenie všetkých animácií zaradených do frontu. Používa sa tiež na dokončenie všetkých animácií pre rôzny rozsah vybratých prvkov. Táto metóda je podobná metódam ako .stop, ktoré majú obidve skutočné parametre. Hlavný rozdiel medzi touto metódou a dokončením je v tom, že metóda ukončenia sa používa na zastavenie a pozastavenie typov vlastností prvkov CSS všetkých animácií vo fronte.
syntax
$(selector).finish(NameOfQueue)
príklad
$("#complete").click(func()(
$("div1").finish();
));
7) dequeue ()
Táto metóda sa používa na odstránenie ďalšej funkcie z frontu a potom sa používa na vykonanie funkcie. Fronta je jedna alebo viac funkcií, ktoré čakajú na spustenie. Táto metóda dequeue sa používa spolu s metódou front. Jeden prvok môže mať niekoľko radov. Fronta fx je najbežnejšia a zároveň predvolená.
syntax
$(selector).dequeue(NameOfQueue)
príklad
$("label").queue(func()(
$("").css("background-color", "black");
$("div").dequeue();
));
8) slideDown ()
Toto je ďalšia užitočná metóda v jQuery, ktorá sa používa na posúvanie nadol alebo na zobrazenie vybraných zoznamov prvkov. Tu je potrebné poznamenať, že to tiež funguje na prvkoch, ktoré sú v skrytom formáte a typ zobrazenia je zobrazený ako žiadny v prípade CSS, ale viditeľnosť sa nebude musieť skrývať.
syntax
$(selector). slideDown (duration, easing, callback)
príklad
$("label").queue(func()(
$("p").slideDown();
));
9) slideUp ()
Metóda slideUp () sa používa na skrytie všetkých
vybrané prvky. Prvky, ktoré sú v skrytej podobe, sa vôbec nezobrazia. Toto preto neovplyvní rozloženie stránky.
syntax
$(selector).slideUp(duration, easing, callback)
príklad
$("label").queue(func()(
$("p").slideUp();
));
10) slideDown ()
Na rozdiel od metódy slideUp () sa táto metóda používa na zobrazenie všetkých skrytých údajov
prvky. Táto metóda slidedown () pracuje na všetkých prvkoch, ktoré sa tiež vzťahujú na skryté metódy v prípade metód jQuery a názov sa zobrazuje aj v CSS, ale viditeľnosť nie je skrytá.
syntax
$(selector).slideDown(duration, easing, callback)
príklad
$("label").queue(func()(
$("p").slideDown();
));
11) Prepnúť ()
Táto metóda sa používa na prepínanie medzi prehliadkou a skrytím rôznych
založené na prvkoch. Táto metóda sa používa na kontrolu viditeľnosti prvkov. Metóda show () sa používa na spustenie, aj keď je prvok skrytý. Hide () sa spustí, aj keď je prvok viditeľný. Kombinácia metód ukázania a skrytia v kombinácii vytvára prepínací efekt, a preto prepínacia metóda ().
syntax
$(selector).toggle(duration, easing, callback)
príklad
$("label").queue(func()(
$("p").toggle();
));
12) slideToggle ()
Táto metóda sa používa na prepínanie medzi funkciami slideUp () a slideDown () pre všetky prvky založené na odseku. Táto metóda sa používa na kontrolu prvkov, ktoré sú vybrané na zviditeľnenie. SlideDown () je funkcia, ktorú môžete vidieť, keď je prvok skrytý. Naopak, prvok slideUp () je ten, ktorý by sa mal spustiť, ak je tento prvok viditeľný.
syntax
$(selector).slideToggle(duration, easing, callback)
príklad
$("label").queue(func()(
$("p").slideToggle();
));
jQuery nám umožňuje pridávať efekty na webovú stránku tým, že poskytuje množstvo funkcií, ktoré možno umiestniť na rôznych selektoroch. Je na vás, ako chcete, aby vaše webové stránky vyzerali efektívnejšie. Dúfam, že sa vám náš článok páčil. Zostaňte naladení na náš blog a získajte ďalšie podobné články.
Odporúčané články
Toto je príručka pre jQuery Effects. Tu sme diskutovali o rôznych typoch metód jQuery Effects so syntaxou a príkladom. Viac informácií nájdete aj v nasledujúcom článku -
- Použitie JQuery
- jQuery Alternatívy
- Príkazy dopytov MySQL
- Čo je postup v SQL?
- jQuery querySelector