Úvod do efektů jQuery
jQuery je jednou z nejpopulárnějších javascriptových knihoven, která je navržena tak, aby zjednodušila doménu HTML DOM, tj. vlastnosti modelu objektu dokumentu, jako je manipulace a stromové procházení. Zjednodušeny jsou také další vlastnosti, jako je zpracování událostí, animace Ajax a CSS. Jedná se o open-source a bezplatnou knihovnu, která se obvykle používá na 73% z 10 milionů webových stránek, které se dnes používají. Mezi hlavní vlastnosti jQuery patří selektory na bázi elementů DOM, manipulace a procházení, což usnadňuje a usnadňuje práci na jQuery. V tomto tématu se budeme učit o jQuery Effects.
Používá se k vytvoření velmi jednoduše vypadajícího rozhraní pro provádění různých druhů úžasných efektů. Tyto metody umožňují rychle použít a aplikovat nejčastěji používané funkce-efekty spolu s holými minimálními konfiguracemi. Příkaz pro zobrazování a skrývání prvků je téměř stejný, jaký by očekával kdokoli, kdo je chce vidět. Příkaz Show () se používá k zobrazení prvků v kompletně zabalené sadě a příkaz hide () se používá k jejich skrytí.
Různé metody jQuery Effect:
Zde diskutujeme některé různé typy metod jQuery efektů
1) Animace ()
Metoda animace se používá k provedení vlastní animace pro sadu vlastností CSS. Tato metoda se používá ke změně stavu prvku z jednoho stavu do druhého spolu se styly CSS. Hodnota vlastnosti se mění postupně tak, aby bylo možné dosáhnout animovaného efektu. Je třeba poznamenat, že animovány by mohly být pouze číselné hodnoty, například okraj: 40 pixelů. Na druhou stranu hodnoty řetězců nemohou být animovány, například barva pozadí: zelená. Toto opět přichází s výjimkou pro řetězce, jako je show, skrýt a přepnout.
Syntax
(selector).animate((styles), duration, easing, callback)
Příklad
$("label").click(func()(
$("#box").animate((height: "100px"));
));
2) Zpoždění ()
Jak název napovídá, tento se používá k nastavení zpoždění pro všechny funkce, které jsou zařazeny do fronty na vybrané prvky.
Syntax
$(selector).delay(duration, NameOfQueue)
Příklad
$("label").click(func()(
$("#div1").delay("fast").fadeOut();
$("#div2").delay("slow").fadeIn();
));
3) fadeToggle ()
Tato funkce se používá k přepínání mezi fade in a fade out funkcí v různých polích. Pokud některý prvek zmizí, lze tuto funkci fadeToggle () použít k jejich vyblednutí. Prvky, které jsou ve skryté podobě, se nebudou zobrazovat jako součást této metody.
Syntax
$(selector).fadeToggle(duration, easing, callback)
Příklad
$("label").click(func()(
$("#box").fadeToggle();
));
4) fadeTo ()
Tato metoda se používá ke změně neprůhlednosti všech
tj. prvky související s odstavcem postupně. Uvedená neprůhlednost v tomto kontextu odkazuje na neprůhlednost měnícího se účinku.
Syntax
$(selector).fadeTo(duration, opacity, easing, callback)
Příklad
$("label").click(func()(
$("p").fadeTo(100, 0.9);
));
5) clearQueue ()
Tato metoda je stejná, jak navrhuje název. To se používá k vymazání fronty a odebere všechny položky z fronty, které nebyly spuštěny. Jakmile bude spuštěna, funkce dokončí svůj běh. To souvisí se dvěma metodami, viz. queue () a dequeue ().
Syntax
$(selector).clearQueue(NameOfQueue)
Příklad
$("label").click(func()(
$("box").clearQueue();
));
6) dokončení ()
Tato metoda v jQuery se používá k ukončení nebo dokončení aktuálně spuštěného animátoru, protože se používá k zastavení všech aktuálně spuštěných animací a používá se k odstranění všech animací ve frontě. Používá se také k dokončení všech animací pro rozmanitý rozsah vybraných prvků. Tato metoda je podobná metodám, jako je .stop, která má oba skutečné parametry. Hlavní rozdíl mezi touto metodou a dokončením je v tom, že metoda ukončení se používá k zastavení a pozastavení typů vlastností prvku CSS všech animací ve frontě.
Syntax
$(selector).finish(NameOfQueue)
Příklad
$("#complete").click(func()(
$("div1").finish();
));
7) dequeue ()
Tato metoda se používá k odebrání další funkce z fronty a potom se používá k provedení funkce. Fronta je jedna nebo více funkcí, které jsou v potrubí čekající na spuštění. Tato metoda dequeue se používá spolu s metodou front. Jeden prvek může mít několik front. Fronta fx je nejčastější fronta, která je také výchozí frontou.
Syntax
$(selector).dequeue(NameOfQueue)
Příklad
$("label").queue(func()(
$("").css("background-color", "black");
$("div").dequeue();
));
8) slideDown ()
Toto je další užitečná metoda v jQuery, která se používá k posunutí dolů nebo k zobrazení vybraných seznamů prvků. Zde je třeba poznamenat, že funguje také na prvcích, které jsou ve skrytém formátu a typ zobrazení je zobrazen jako žádný v případě CSS, ale viditelnost nebude muset být skryta.
Syntax
$(selector). slideDown (duration, easing, callback)
Příklad
$("label").queue(func()(
$("p").slideDown();
));
9) slideUp ()
Metoda slideUp () se používá ke skrytí všech
vybrané prvky. Prvky, které jsou ve skryté podobě, nebudou vůbec zobrazeny. Toto tedy nemá vliv na rozvržení stránky.
Syntax
$(selector).slideUp(duration, easing, callback)
Příklad
$("label").queue(func()(
$("p").slideUp();
));
10) slideDown ()
Na rozdíl od metody slideUp () se tato metoda používá k zobrazení všech skrytých
Prvky. Tato metoda slidedown () pracuje na všech prvcích, které se také vztahují ke skrytým metodám v případě metod jQuery a název je také zobrazen v CSS, ale viditelnost není skryta.
Syntax
$(selector).slideDown(duration, easing, callback)
Příklad
$("label").queue(func()(
$("p").slideDown();
));
11) Přepnout ()
Tato metoda se používá k přepínání mezi show a skrýt různé
založené prvky. Tato metoda se používá ke kontrole viditelnosti prvků. Metoda show () se používá ke spuštění, i když je prvek skrytý. Hide () se spustí, i když je prvek viditelný. Kombinace metod ukázat a skrýt v kombinaci vytváří přepínací efekt, a proto metoda přepíná ().
Syntax
$(selector).toggle(duration, easing, callback)
Příklad
$("label").queue(func()(
$("p").toggle();
));
12) slideToggle ()
Tato metoda se používá k přepínání mezi funkcemi slideUp () a slideDown () pro všechny prvky založené na odstavci. Tato metoda se používá ke kontrole prvků, které jsou vybrány pro zviditelnění. SlideDown () je funkce, kterou lze vidět, když je prvek skryt. Naproti tomu prvek slideUp () je ten, který by měl být spuštěn, pokud je prvek viditelný.
Syntax
$(selector).slideToggle(duration, easing, callback)
Příklad
$("label").queue(func()(
$("p").slideToggle();
));
jQuery nám umožňuje přidávat efekty na webovou stránku tím, že poskytuje řadu funkcí, které lze použít na různých selektorech. Je na vás, jak chcete, aby vaše webové stránky vypadaly efektivněji. Doufám, že se vám náš článek líbil. Sledujte na našem blogu další články, jako jsou tyto.
Doporučené články
Toto je průvodce efekty jQuery. Zde jsme diskutovali různé typy metod jQuery Effects se syntaxí a příkladem. Další informace naleznete také v následujícím článku -
- Použití JQuery
- jQuery Alternativy
- Příkazy dotazů MySQL
- Co je postup v SQL?
- jQuery querySelector