JQuery api animációs hatások
A jQuery számos olyan funkcióval rendelkezik, amelyek az oldalelemekkel animált effekteket hajtanak végre. Az egyszerű funkciókból kiindulva: elrejti, megjelenik, mozgó elemeket, a könyvtár lehetővé teszi, hogy saját, összetettebb hatásokat hozzon létre a CSS tulajdonságok megváltoztatásán alapulva.
Ezek a változások simán vagy azonnalian történhetnek, lelassíthatók, felgyorsulhatnak vagy egyenletesen futhatnak.
.show () .hide ()
A kijelölt elemeket azonnal megjeleníti / elrejti úgy, hogy a css-display tulajdonságát semmihez módosítja anélkül, hogy megváltoztatná az átláthatóságot és a méreteket.
.show (duration, [visszahívás]) .hide (duration, [callback])
időtartama - az animáció időtartama (megjelenése vagy elrejtése).
Megadható milliszekundumban (200 és 600 milliszekundum)
Ezt a "gyors" vagy "lassú" karakterlánc adja meg.
Ha ez a paraméter nincs beállítva, az animáció azonnal megjelenik, az elem egyszerűen megjelenik / eltűnik
A visszahívás olyan funkció, amelyet az animáció (megjelenés vagy elrejtés) kezelőjének végére állítottak be.
.show ([duration], [easing], [callback]) .hide ([duration], [easing], [callback])
enyhítés - változtassa meg az animáció sebességét (lassuljon-e a futás vége vagy fordítva).
A jQuery csak két ilyen funkciót tartalmaz: "lineáris" és "swing"
(egységes animáció és animáció gyorsulással)
További lehetőségek találhatók a bővítményekben. Például a jQuery felhasználói felület több mint 30 új hangszórót biztosít.
Megmutatjuk az összes rejtett bekezdést. A kulcsszó lassú, mint a paraméter. Az animáció 600 milliszekundumra készült.
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
Az összes rejtett div elem elemeinek sorrendben történő megjelenítése, a kulcsszó gyors használata. Minden animáció 200 milliszekundumot vesz igénybe, és a következő után elindul a következő.
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
A div div elemeinek elrejtése 2 másodpercre kattintva, és amikor az elem már el van rejtve, törölje azt. Próbálja nagyon gyorsan, hogy kattintson div'am.
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
.slideDown ([duration], [easing], [callback]) .slideUp ([duration], [easing], [callback])
Ezekkel a funkciókkal a kijelölt elemeket megjelenítheti és elrejtheti az oldalon, a zökkenőmentesen bővülő és összeomló műveletekkel.
Ne feledje, hogy az elem elrejtése után a css-tulajdonság megjelenése nem lesz. de a megjelenés előtt visszaadja korábbi értékét.
Nyitott, "lecsúszott", a div összes eleme. Az idő beállításához használja a kulcsszót "lassú", azaz lassan nyitva.
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
.slideToggle ([időtartam], [enyhítés], [visszahívás])
Ennek a módnak a meghívása sima összecsapást eredményez (ha az elem kibővül) vagy kibontakozik (ha az elem összeomlik) a kiválasztott elemek oldalán.
Ne feledje, hogy az elem elrejtése után a megjelenő css-tulajdonság nem válik be, és előfordulása előtt visszaadja az előző értékét. Amikor rákattint a gombra, a képen és a szövegben lévő elem váltakozva összeomlik és kibontakozik:
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
.fadeIn ([időtartam], [enyhítés], [visszahívás]) .fadeOut ([időtartam], [enyhítés], [visszahívás])
Ezekkel a funkciókkal az átláthatóság simán megváltoztathatja a kijelölt elemeket az oldalon.
Ne feledje, hogy az elem elrejtése után a css-display tulajdonság automatikusan egyenértékű lesz sem, és előfordulása előtt visszaadja a régi értékét.
"Mutass" a rejtett div elemeket egyenként, minden alkalommal, amikor az animációs hatás kb. 600 ms-ot vesz igénybe.
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
"Mutassa" a piros blokkot a szöveg tetején. Az animáció végén megjelenik a következő hatás, amely "megjeleníti" a span tagot.
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
.fadeTo ([időtartam], opacitás, [enyhítés], [visszahívás])
Módosítja a kiválasztott elemek átlátszóságát az oldalon. Lehetővé teszi az átlátszóság simaságát.
fadeTo ugyanazokat az argumentumokat veszi figyelembe, mint a show vagy a hide.
Ezenkívül a második argumentum, az opacitás 0-tól 1-ig terjedő szám, amely az elem "cél" átláthatóságát jellemzi.
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
A div elemek átláthatóságát véletlenszerűen változtatjuk meg.
A hatás időtartama körülbelül 200 ms.
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
.fadeToggle ([időtartam], [enyhítés], [visszahívás])
A módszer elhívása sima eltűnést eredményez (ha az elem nincs rejtve) vagy az oldal kiválasztott elemeinek megjelenését (ha az elem rejtve van) az áttetszőség megváltoztatásával.
Ne feledje, hogy az elem elrejtése után a megjelenő css-tulajdonság nem válik be, és előfordulása előtt visszaadja az előző értékét.
Amikor megnyomja a gombot, a kép és a szöveg eleme felváltva megjelenik és eltűnik:
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
.animálás (tulajdonságok, [időtartam], [enyhítés], [visszahívás])
Felhasználó által definiált animáció végrehajtása kiválasztott elemekkel. Az animáció az elemek CSS tulajdonságainak sima változása miatt következik be.
tulajdonságok - az animációban részt vevő CSS-tulajdonságok listája és azok végső értékei.
Ezt az objektum határozza meg, formátumban. Nagyon hasonlít egy paramétercsoport beállításához az .css () metódusban.
Azonban a tulajdonságok szélesebb körű értéktípusokkal rendelkeznek.
Nemcsak ismert egységek formájában állíthatók be:
számok, képpontok, százalékok stb.
hanem viszonylag is. Továbbá lehetőség van arra, hogy hozzanak értékeit „elrejteni”, „show”, „kampós”, amely elrejtését, vagy megváltoztatni a megjelenését az elemnek az ellenkezője, mivel a paraméter, amely azokat alkalmazzák.
A div elemek elrejtése az átlátszóság csökkentésével és az elem magasságának (összecsukásával) csökkentésével. Vegye figyelembe, hogy a tulajdonságparaméterben csak azokat a css-tulajdonságokat adhatja meg, amelyeket numerikus értékekkel ad meg.
Például a háttérszín tulajdonságot nem szabad használni.
Haladó .animációs útmutató ()
Kattintson a gombra a div elem animációjának elindításához.
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
Példa egy "relatív" animációra. Használja jobbra / balra többször.
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
Tekintse meg a következő példát - sokkal tisztább lesz.
Az első gomb csak egy ilyen párhuzamos animáció példáját mutatja. Egy elem azonosítójával # block1 kell változtatni a szélessége 90% -a lehet, a betűtípus kell állítani a méretét 24px és jobb keretben szélesnek kell 15px.
Felhívjuk a figyelmet arra, hogy a szélességváltozás egyidejűleg történik a másik két hatással, amelyek a sor sorrendjében már egymást követik egymást.
A második gomb majdnem ugyanazt az animációt indítja el, ez csak az összes hatás egymást követve követi egymást.
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
visszatér: jQuery
Megállítja az animáció összes hatását a készlet összes elemére.
Kattintson az Ugrás gombra az animáció elindításához.
Ezután kattintson a Stop gombra a megállításához.
Nos, a Vissza gombra kattintva egy másik animációs hatást indít - a blokk az ellenkező irányban mozog.
Felhívjuk a figyelmet arra, hogy a számlálás a blokk leállításától függ.
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
visszatér: Array
Visszaad egy hivatkozást az elemek sorára (funkciók sorát).
Szüntesse meg ezt a példát. A gombra kattintva a sor hosszát az aktuális pillanatban kapjuk meg.
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
.sor (visszahívás)
visszatér: jQuery
Új funkciót ad, amelyet végre kell hajtani a sor végére a készlet összes elemére.
A példában: a felhasználó által definiált függvények sorát.
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
.sor (sor)
visszatér: jQuery
A készlet összes elemének sorát egy új sorral (egy sor funkcióval) helyettesíti.
A példában a Stop gomb megnyomásával állíthatja be a sor tömböt az aktuális sor eltávolításához. A Start gomb megnyomására a sor újraindul.
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot
.dequeue ()
visszatér: jQuery
Eltávolítja a sor várakozó funkcióját a sor végén, lehetővé téve a sor folytatását.
A példában a dequeue használható arra, hogy a várakozási sorok folytatása a várólistát követően (visszahívás). Próbálja meg eltávolítani a $ (ezt) .dequeue () függvényt; és meg fogja találni, hogy az animáció leáll a toggleClass elindítása után.
Nyissa meg a példát egy új ablakban, és nézze meg a forráskódot