Hogyan lehet hatásokat alkalmazni a html-ben a jquery használatával?
Üdvözlet a blogodon!
Ma megmondom, hogyan lehet különböző hatásokat hozzáadni egy HTML oldalhoz a jQuery használatával.
A Div / Span HTML-komponensének elrejtése / megjelenítése és átkapcsolása jQuery használatával
Napjainkig a legtöbb weboldal olyan szakaszokat tartalmaz, amelyek rejtve / megmutathatók (elrejtése / megjelenítése), és egyszerűen egy spoiler (spoiler) a rész ikonjára kattintva. Ezenkívül tetszőleges HTML összetevőhöz, például gombhoz, szövegdobozhoz vagy div / spanhoz hasonlóan tetszés szerinti hangszórót is fel kell kötni. Ez könnyen elvégezhető a jQuery használatával.
Tegyük fel, hogy van egy szövegdoboz és egy gomb, és akkor kell megnyitnunk egy szövegmezőt, amikor a gombra kattintunk. Ehhez egy kódrészlet van.
A fenti kódrészletben a #user-azonosítót használva kiválasztjuk a szövegmezőt, majd a hide () funkciót elrejteni. Egyszerűen, nem igaz?
Ezenkívül, hogy megmutassuk, melyik összetevőt fogjuk használni, meg kell adnunk a következő kódot:
Ezenkívül nem csak HTML-komponenseket rejthet el / jeleníthet meg, hanem megadhatja a fordulatszám- és visszahívási funkciót is, amelyet a tartalom rejtett vagy az alább felsorolt módon jelenít meg.
A hide () és a show () szintaxisa az alábbi:
Megadhat egy kezelő funkciót is, amelyet az animáció befejezése után hívnak.
Ezenkívül végrehajthatja a kapcsolási funkciót is, ahol a gomb megnyomásakor a Div vagy a Table címkéjén a hatáskapcsoló hívható.
SlideUp / SlideDown a jQuery programmal
Ez egy egyszerű hatás, amely megmutatja, hogy a konténer lecsúszik vagy lefelé. Egyszerűen meg kell hívnia a slideUp () és a slideDown () funkciókat.
A SlideUp / SlideDown, mint a hide () / show () függvények, különböző argumentumokat is használhat a csúszási sebesség szabályozására, és visszahívási funkció is hívható.
Ezenkívül a SlideToggle () funkcióval lefelé és lefelé csúsztatható funkciókat érhet el. A SlideToggle () szintén ugyanazokkal az érvekkel jár, mint a SlideDown / SlideUp.
HTML komponensek animálása a jQuery használatával
A JQuery biztosít animát (), amellyel saját animációkat készíthet. Ennek a funkciónak a szintaxisa a következő:
Ennek a funkciónak a kulcsfontosságú eleme az animált objektum tulajdonságainak tárgya. Egy adott objektumon belül minden kulcs egy stílus tulajdonság, és animált is (például: "magasság", "felső" vagy "átlátszóság").
A kulcshoz tartozó érték az a tulajdonság, amelyhez az animáció tartozik. Ha az érték egy szám, akkor a stílus tulajdonság átkerül az aktuális állapotról az új számra. Ellenkező esetben, ha a "hide", a "show" vagy a "toggle" karakterlánc rendelkezésre áll, akkor alapértelmezés szerint az animáció épül ehhez a tulajdonsághoz.
- params (Hash): Olyan stílusú tulajdonságok, amelyeket animálni szeretnél.
- sebesség (String | Number): (opcionális) A három előre beállított sebesség ("lassú", "normál" vagy "gyors") egyike vagy az animáció aktiválásához szükséges milliszekundumszám (pl.
- enyhítés (karakterlánc): (opcionális) A használni kívánt hatás neve (effektmodul szükséges).
- visszahívás (funkció): (opcionális) Az animáció befejezésekor végrehajtandó funkció.
Példa a "lazítás" funkció használatára, hogy egy másik animációs stílust kapj. Ez csak akkor működik, ha van olyan pluginja, amely ezt a funkciót "easing" (csak a "lineáris" függvény alapértelmezés szerint a Jquery-lel biztosítja).
Így a jQuery segítségével létrehozhat egy jó felhasználói felületet a weboldaladon. Továbbá, tudassa velem, ha saját beépített plug-ineket használ a más UI-hatások eléréséhez.
Ez az! Búcsúzni és hamarosan látlak!