módszerével vezetés jquery élő ()

előző ◈ a következő

jQuery élő () - módszer wrapper, azaz amikor munka közben egy előre kiválasztott készlet DOM elemek csomagolva jQuery. A módszer lehetővé teszi, hogy alkalmazza a kívánt animációs hatások a készletben lévő elemek. A fentiek megvalósulása a gyakorlatban tette lehetővé egy sor CSS tulajdonságok és értékek, hogy ezek a tulajdonságok lesz a végén az animáció teljesítményét. Közbenső értékeket, hogy a stílus lesz az elérni kívánt hatás (automatikusan vezérelt animáció motor), meghatározza a hatás időtartama és a funkció-lazítás; Két ilyen lehetőség az alábbiakban tárgyaljuk.

Listája kitett animáció CSS ​​tulajdonságok azokra korlátozódik, amely eltarthat számértékek. Az értékek lehetnek abszolút (például 200), vagy relatív. Amikor az abszolút értéke egységnyi jQuery az alapértelmezett - pixel. Mi is használjuk speciális egységek: em, rem, vagy érdek. Ahhoz, hogy meghatározzák a relatív értékét használt előtagok vagy = + - =; előtagok irányított relatív célérték a pozitív vagy negatív irányban, ill.

A paraméterek és az aláírás módszer élő ()

A módszer két alapvető formája; A legtöbb használt választható paraméterek (szögletes zárójelben).

  • animálására (tulajdonságok [, időtartam] [, megkönnyítve] [, visszahívás])
  • animálására (tulajdonságok [, opciók])
  • tulajdonságok (tárgy): A tulajdonságok listája a CSS-tartalmú végén elért az animáció érték.
  • időtartam (Number | karakterlánc): A hatás időtartama ezredmásodperc, vagy az egyik előre meghatározott sorokat: „lassú” (600ms), „normális” (400ms), vagy a „gyors” (200ms). Az alapértelmezett érték - a „normális”.
  • lazítás (String): használt az átmeneti (átmeneti) a neve a függvény-lazítás (amely meghatározza a változás sebessége animáció). Az alapértelmezett érték a „swing”.
  • visszahívás (funkció): a funkciót végrehajtja befejezésekor animáció minden animált elem.
  • opciók (tárgy): objektum, amely egy sor tulajdonságok (kiegészítő opciók) kell átadni, hogy az eljárás. Az alábbi tulajdonságokkal rendelkezik:
    • Mindig (function): függvényt, a végén az animáció, vagy ha a végrehajtás az animáció megáll (de nem fejeződött be).
    • teljes (Function): látja el a végén az animáció.
    • done (funkció) nevezik végén az animáció funkciót.
    • időtartama (String | száma): a fent leírt.
    • lazítás (karakterlánc): a fent leírt.
    • nem felelt meg (funkció) kerül sor, amikor egy kísérlet animáció.
    • folyamatban (funkció): Végzett minden egyes lépés után az animáció. Ez az úgynevezett egyszer minden elem után animáció végrehajtását.
    • queue (logikai érték): Az animáció kell helyezni minden hatás / funkciók (hatások queue (részletek alább) Az alapértelmezett érték - igaz ..
    • specialEasing (Object): tárgy, amelynek a paraméterei a CSS-tulajdonságok, amelyek értéke funkciói csomópont
    • kezdeni (Function) kerül végrehajtásra, ha az animáció kezd kerül sor.
    • lépésben (funkció): nevezett funkció minden animált tulajdonsága egyes animált elem.

Megkönnyítve a kifejezés leírására egy eljárás, amely meghatározza és ellenőrzi a feldolgozási sebesség animációs képkockák. Animáció szekvenciálisan hajtjuk végre, ha sorban opció beállítása true. és párhuzamos (queue) - ha mind hamis.

Példák segítségével élő () módszer

Mi ezt a módszert a gyakorlatban. Megjegyezzük, hogy a végrehajtás az összetett sorrendben animációk ezzel a módszerrel, előfordulhatnak hibák. Ez azt jelenti, nagyon összetett animációk, ezt a módszert kell kerülni.

egyetlen animáció

Hozzon létre egy animációs rendkívül egyszerű, csak egy hívást. Például, szükség van, hogy mozog a tag az egyik oldalról a másik blokk. Ennek illusztrálására animáció, hozzon létre két div elemeket, egyik a másik belsejében. A stílus az alábbiak szerint: a belső div háttér - piros. kód:

Alkalmazható élő (), és mozgassa a kis négyzet az egyik oldalról a másik:

Animál csak a bal tulajdon. Animáció hossza - előre meghatározott érték a lassú (600ms). belső

(Kinek osztály .square-kicsi) mozog, az abszolút értéke. Az érték függően választjuk a tartály szélessége fenti CSS kódot. Ez a megoldás messze nem ideális. Tehát, ha megváltoztatja a tartály szélessége, a belső
eléri a másik oldalon (a szélesség növelése), vagy megkerüli (ha szélességének csökkentését). Ennek elkerülése érdekében, az ingatlan kell állítani balra, attól függően, hogy a számítás a jelenlegi szélesség külső és belső
:

Futtatni több animáció hurok

Verziószáma animációk egyetlen elemet vagy elemek halmazának nem nehéz létrehozni egy szekvenciát (lánc) hívások élő () módszer. Ismét, mozgassa a kis négyzet; akkor mozog a kerületük mentén a homokóra, belül a nagy tér (helyett egy téglalap). Ahhoz, hogy hozzon létre egy demo a következő jelölést:

Mert .square kicsi adott CCS-kód használatával az előző példában. Stílus külső tér:

Most fixált animáció, hogy van, akkor győződjön meg róla, hogy a végén az animáció elindul újra. Ehhez arra lehet következtetni, a hívás 4 élő () függvények egy függvényen belül, ami viszont, az úgynevezett másik funkció. Azaz, hozzon létre egy függvényt, amelyre hivatkozni lehet. Akkor használja ezt a funkciót teljes és indítsa újra az animáció az utolsó lépés után.

Figyeljük meg, hogy ha hívod élő () nem ír ugyanolyan paraméterekkel többször változó lehetőségeket használták. Továbbá kapcsolja a teljes () funkció az utolsó lépésben a módszerrel JQuery kiterjesztése ().

több visszahívások

Szintén ebben az utolsó példában határozza meg a tulajdonságok indul, teljes körű, és a haladás útján paraméteropciók (a második paraméter a második forma). A cél -, hogy kapcsolja ki a gombot, rákattint kezdődik az animáció, amikor az animáció (már) történik. A második feladat - megmutatni egy százalékát, amit része a teljes teljesítmény az animáció került sor. Ebben a példában használjuk az első demo a módosított szükséges korrekciókat.

Annak érdekében, hogy meg lehet jeleníteni a százalékos mértéket, és hozzon létre egy gombot elem (span). Jelölés:

következtetés

előző ◈ a következő