Animálni () - végez tetszőleges animáció meg a tulajdonságait CSS

A funkció, hogy az úgynevezett minden esetben - vagy a végén az animáció, vagy amikor leállította nélkül császármetszéssel. (Hozzáadott verzió: 1.8)

.animate () metódus lehetővé teszi, hogy animációs hatást bármelyik numerikus CSS tulajdonság egy elem. Az egyetlen szükséges paraméter egy objektum tulajdonságait CSS. Ez az objektum hasonló az egyik, hogy átvisszük a .css () módszer. azzal az eltéréssel, hogy egy szűkebb körének tulajdonságok.

Animált tulajdonságok és értékek

Valamennyi animált kell animálni a tulajdonságokat, egyetlen számérték. az alább meghatározott kivétellel; a legtöbb nem-numerikus tulajdonságokat lehet animált a alapvető funkcionális jQuery (például szélessége. magasság vagy balra lehet animált háttér-színe, de nem tud, kivéve egy dugót jQuery.Color használatra). Az ingatlan értékeket tekintik a képpontok számát, hacsak másként nem jelezzük. Egységek em és% lehet adni, ahol alkalmazható.

Amellett, hogy a stílus tulajdonságait, ami nem svoystvas stílusa, például scrollTop és scrollLeft. és a felhasználói tulajdonságokat lehet animált.

Rövidített CSS tulajdonságok (mint például a betűtípus, háttér, határ) nem támogatja teljes mértékben. Például, ha azt szeretnénk, hogy animálni a szélessége a határ, a stílus és az eredeti határ szélességét meg kell adni előre. Vagy, ha azt szeretnénk, hogy animálni a betűméretet kell használni fontSize vagy CSS megfelelője „font-size”, és nem csak „font”.

Amellett, hogy a numerikus értékeket, minden tulajdonság vehet a húr: „show”. „Elrejtése” vagy „kapcsoló”. Ezek a csökkentések révén tetszőleges animáció megjelenítéséhez vagy elrejtéséhez, amely figyelembe veszi a típusú kijelző elem. Ahhoz, hogy a beépített monitor állapota megjelenítési tulajdonságait, a vonal „kampós” kell meghatározni az értékét a CSS tulajdonság animált.

Animált tulajdonságai szintén relatív. Ha az érték beállítása a vezető karaktersor + = és - =. a cél érték kiszámítása hozzáadásával vagy kivonásával egy előre meghatározott számot az aktuális tulajdonság értéket.

Fontos: Ellentétben a rövidített animációs technikák, mint például a .slideDown () és .fadeIn (). .animate () módszer nem elrejteni az elem részeként a hatás. Például, ha a $ ( "someElement") .hide (). Animate (500). animáció fog futni, de a tárgy marad rejtve.

tartam

Meghatározott időtartam milliszekundum. A nagyobb értékek több animáció lassú és nem gyors. Az alapértelmezett érték 400 milliszekundum. „Gyors” és a „lassú” sort is alkalmazhatunk, hogy jelezze a hossza 200 és 600 milliszekundum, ill.

visszahívások

Ha megad kezdeni. lépés. haladást. teljes. kész. és mindig sikerül egy callback függvényt, akkor fogják hívni minden animált elem; Ezt ezeket a funkciókat fog mutatni animálni DOM-elem. Ha a minta nem tartalmaz elemeket, majd a visszahívási funkció nem kerül végrehajtásra. Ha több elem van animált, a visszahívási újból végrehajtódik minden egyes elem, és nem egyszer az animáció általában. A következő módszer .promise () letölteni a tárgy Promise és csatolja visszahívások.

alapvető használati

Animáció olyan elem, például egy egyszerű kép:

Kép 1 - illusztráció egy előre meghatározott animációs hatás

Megjegyezzük, hogy a célérték magasságának tulajdon egyenlő „kapcsoló”. Mivel a kép volt látható, mielőtt az animáció csökkenti a magasság 0 elrejteni. Egy második nyomja meg, akkor kapcsolja ezt az átmenetet:

Kép 2 - illusztráció egy előre meghatározott animációs hatás

Az ingatlan fényelnyelés képek már egyenlő a célérték, hogy ez a tulajdonság nem animált a második kattintással. Mivel a bal tulajdonság értéke egy relatív érték, a kép eltolódik tovább jobbra a második animáció.

Tulajdonságok irányban (fel. Jobb. Bottom. Bal) nincs észrevehető hatása az elemek, ha a pozíció tulajdonság értéke értékének statikus (ez az alapértelmezett beállítás).

Fontos: jQuery UI könyvtár kitágul .animate () módszer, amely lehetővé teszi, hogy animálni néhány nem-numerikus tulajdonságok, mint például a szín tulajdonságait. jQuery UI is tartalmaz egy mechanizmust annak jelzésére egyedi animációk segítségével CSS osztályok és nem az egyes tulajdonságok.

Megjegyzés: Ha a kísérlet animálni az elem magassága vagy szélessége egyenlő 0px, ahol a tartalmi elem jelenik meg, mert a túlfolyó (túlcsordulás), jQuery lehet vágni túlcsordulás az animáció. Azáltal, hogy a mérete az eredeti elem elrejtve az animációs, akkor arról, hogy az animáció simán fut. clearfix lehet használni, hogy automatikusan korrigálja a mérete a alapeleme, nem kell telepíteni őket kézzel.

léptetés funkció

A második változat a módszer .animate () lépésről lehetőség - egy callback függvényt, amely az úgynevezett minden animáció lépést. Ez a funkció akkor hasznos, hogy tartalmazza tetszőleges típusú animációk, vagy megváltoztatja az animáció, idején annak végrehajtását. Ez két paramétert (most és fx), és ez azt jelzi, animálni DOM-elem.

• most. számértéke az ingatlan animált minden lépésben
• fx. ssydka jQuery.fx a prototípus objektumot. amely számos tulajdonsággal, mint például az animált elem ELEM, kezdete és vége az első és utolsó értékeit az ingatlan animált és prop rendre a tulajdonság animált.

Megjegyezzük, hogy a függvényt az egyes lépések animált a tulajdonságok minden elem egy animált. Például, adott két lista, lépést a funkciót aktiválja négyszer minden egyes lépése az animáció: