Bevezetés a jQuery effektusokba

A jQuery az egyik legnépszerűbb javascript könyvtár, amelynek célja a HTML DOM, azaz a dokumentumobjektum modell tulajdonságainak, például a manipuláció és a fa áthaladásának egyszerűsítése. Más tulajdonságok, például eseménykezelés, Ajax és CSS animáció is egyszerűsödtek. Ez egy nyílt forráskódú és ingyenes könyvtár, amelyet általában a manapság használt 10 millió webhely 73% -ában használnak. A jQuery alapvető tulajdonságai közé tartozik a DOM elem alapú szelektorok, a manipuláció és az áthaladás, ami sokkal könnyebbé és kényelmesebbé teszi a jQuery használatát. Ebben a témában megismerjük a jQuery effektusokat.

Ez egy nagyon egyszerű felület biztosítására szolgál, hogy különféle csodálatos effektusokat lehessen végrehajtani. Ezek a módszerek lehetővé teszik a leggyakrabban használt funkció-effektusok gyors használatát és alkalmazását a minimális és minimális konfigurációk mellett. Az elemek megjelenítésére és elrejtésére vonatkozó parancs nagyjából ugyanaz, mint amit bárki várni akar. A Show () paranccsal az elemeket teljesen becsomagolt halmazban lehet megmutatni, a hide () parancs pedig elrejti őket.

Különböző jQuery hatásmódszerek:

Itt a jQuery effekt módszer néhány különféle típusát tárgyaljuk

1) Animáció ()

Az animáló módszert egyéni alapú animáció végrehajtására használják egy CSS tulajdonságcsoportra. Ez a módszer az elem állapotának megváltoztatására az egyik állapotból a másikra, a CSS stílusokkal együtt. Az ingatlan értékét fokozatosan változtatják meg, hogy animált hatás érhető el. Meg kell jegyezni, hogy csak numerikus értékeket lehet animálni, például a margin: 40px. Másrészt a húrok értékeit nem lehet animálni, például a háttér színét: zöld. Ez ismét olyan kivételekkel jár, mint a vetítés, elrejtés és váltás.

Szintaxis

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

Példa

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

2) Késleltetés ()

Ahogy a neve is sugallja, ez az a funkció, amellyel a kiválasztott elemekre sorban lévő összes funkció késleltethető.

Szintaxis

$(selector).delay(duration, NameOfQueue)

Példa

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

3) fadeToggle ()

Ezzel a funkcióval válthat a különféle dobozok be- és kikapcsolási funkciói között. Ha valamelyik elem elhalványul, akkor a fadeToggle () függvény felhasználható azok beiktatására. A rejtett formában lévő elemek nem jelennek meg ennek a módszernek a részeként.

Szintaxis

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

Példa

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

4) fadeTo ()

Ez a módszer az összes opacitás megváltoztatására szolgál

azaz a bekezdéssel kapcsolatos elemek fokozatosan. A megadott átlátszatlanság ebben az összefüggésben a változó hatás-átlátszóságra utal.

Szintaxis

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

Példa

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

5) clearQueue ()

Ez a módszer megegyezik a név által javasolt módszerrel. Ez a sor törlésére szolgál, és eltávolítja a sorból az összes elemet, amelyet még nem futtatott. A funkció befejezi futtatását, miután elkezdett futtatni. Ez két módszerhez kapcsolódik, nevezetesen. sor () és késleltetés ().

Szintaxis

$(selector).clearQueue(NameOfQueue)

Példa

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

6) befejezés ()

Ez a jQuery módszer a jelenleg futó animátor befejezésére vagy befejezésére szolgál, mivel az összes jelenleg futó animáció leállítására szolgál, és az összes sorban lévő animáció eltávolítására szolgál. Arra is felhasználják, hogy az összes animációt a kiválasztott elemek változatos tartományára elkészítsék. Ez a módszer hasonló az olyan módszerekhez, mint a .stop, amelyeknek mindkét valódi paramétere van. A módszer és a befejezés közötti fő különbség az, hogy a befejezési módszert használják az összes sorban lévő animáció CSS ​​elem tulajdonságtípusainak leállítására és szüneteltetésére.

Szintaxis

$(selector).finish(NameOfQueue)

Példa

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

7) dequeue ()

Ezt a módszert a következő funkció eltávolítására használják a sorból, majd a funkció végrehajtására használják. A sor egy vagy több olyan funkció, amelyek a folyamatban vannak, és futásra várnak. Ezt a dequeue módszert a soros módszerrel együtt alkalmazzák. Az egyik elemnek több sor lehet. Az fx sor a leggyakoribb, amely szintén az alapértelmezett sor.

Szintaxis

$(selector).dequeue(NameOfQueue)

Példa

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

8) slideDown ()

Ez egy újabb hasznos módszer a jQuery programban, amelyet a kiválasztott elemek listájának lecsúsztatására vagy megjelenítésére használnak. Itt érdemes megjegyezni, hogy rejtett formátumú elemekre is működik, és a képernyő típusa CSS esetében semmi nem látható, de a láthatóságot nem kell rejteni.

Szintaxis

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

Példa

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

9) slideUp ()

A slideUp () metódus az összes fájl elrejtésére szolgál

kiválasztott elemek. A rejtett formában lévő elemek egyáltalán nem jelennek meg. Ez tehát nem befolyásolja az oldal elrendezését.

Szintaxis

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

Példa

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

10) slideDown ()

A slideUp () módszerrel ellentétben ezt a módszert az összes rejtett megjelenítésére használják

elemekkel. Ez a csúsztatott () módszer minden olyan elemre működik, amelyek a rejtett módszerekhez kapcsolódnak a jQuery módszerek esetében is, és a név is megjelenik a CSS-ben, de a láthatóság nem rejtett.

Szintaxis

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

Példa

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

11) Váltás ()

Ezt a módszert válthatjuk a különféle megjelenítés és elrejtés között

alapú elemek. Ezt a módszert használják az elemek láthatóságának ellenőrzésére. A show () metódus akkor is fut, ha az elem rejtett. Az elrejtés () akkor is fut, ha az elem látható. Mind a megjelenítés, mind az elrejtés módszerei együttesen váltáshatást hoznak létre, és ezért a módszer váltás ().

Szintaxis

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

Példa

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

12.) slideToggle ()

Ezt a módszert válthatjuk a slideUp () és a slideDown () függvények között az összes elemre a bekezdés alapján. Ez a módszer a kiválasztott elemek láthatóságának ellenőrzésére szolgál. A SlideDown () az a funkció, amely fut, amikor az elem el van rejtve. Ezzel szemben a slideUp () elemet kell futtatni, ha az elem látható.

Szintaxis

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

Példa

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

A jQuery lehetővé teszi számunkra, hogy hozzáadjuk az effektusokat a weboldalhoz, számos mennyiségű funkcióval, amelyeket különféle választógépekre lehet felvinni. Ön rajtad múlik, hogyan szeretné weboldalait jobban megjeleníteni. Remélem tetszett a cikkünk. Kísérje figyelemmel a blogunkat további hasonló cikkekkel kapcsolatban.

Ajánlott cikkek

Ez a jQuery Effects útmutatója. Itt megvitattuk a jQuery Effects Methods különféle típusait szintaxissal és példával. A következő cikkben további információkat is megnézhet -

  1. A JQuery felhasználásai
  2. jQuery alternatívák
  3. MySQL lekérdezési parancsok
  4. Mi az eljárás az SQL-ben?
  5. jQuery querySelector

Kategória:

Szoftverfejlesztés