Mbinu ya animate

Mbinu animate inaruhusu kuunda athari za animasyon kwa sifa mbalimbali za CSS. Kigezo pekee cha lazima - kitu chenye sifa za CSS, kama ile tunayopitisha kwa mbinu css. Sifa nyingi, zilizo na thamani zisizo za nambari au kadhaa haziwezi kuchezwa kwa utendakazi wa msingi wa jQuery (k.m. background-color). Pia si kila wakati majina mafupi ya sifa za CSS yanasaidiwa, kwa mfano font - badala yake tunahitaji kutumia fontSize au font-size. Kabla ya thamani unaweza kuweka '+=' au '-=', katika kesi hiyo thamani iliyoonyeshwa hapo baadaye itaongezwa au itapunguzwa kutoka kwa thamani ya sasa ya sifa. Pia badala ya thamani za nambari unaweza kuweka show, hide au toggle. Athari zote za jQuery, ikiwa ni pamoja na animate, zinaweza zimazimwa kimataifa, kwa kutumia usanidi jQuery.fx.off = true, ambayo inaweka thamani ya muda uendeshaji kuwa 0.

Syntax

Kigezo cha kwanza cha animasyon hupitisha kitu chenye sifa za CSS na thamani zake katika umbizo ufunguo: thamani, ambazo tunakusudia kucheza. Vigezo vilivyobaki huchukuliwa kuwa si vya lazima. Kigezo cha pili - huamua muda wa animasyon kwa millisekunde, 400ms kwa chaguo-msingi. Kigezo cha tatu ni kitendo cha ulegezaji kwa mpito (kwa chaguo-msingi ni swing), na cha nne - kitendo cha callback, ambacho kitaanza baada ya kukamilika kwa animasyon:

Muda unaweza kuwekwa sio tu kwa millisekunde, lakini pia kwa maneno muhimu slow (600ms) na fast (200ms), kadiri thamani inavyokuwa kubwa, ndivyo animasyon inavyokuwa polepole. Unaweza kupitisha kwa mbinu chaguzi mbalimbali kama kigezo cha pili, kwa umbo la kitu cha JavaScript, kilicho na jozi ufunguo: thamani:

Kwa mfano, wacha tuweke kwa sifa za CSS width na height thamani toggle. Muda uendelee kwa 5000ms, vitendo vya ulegezaji tutavipitisha kwa umbo la kitu, kwa upana hii itakuwa kitendo cha mstari, na kwa urefu - easeOutBounce, pia baada ya kukamilika kwa animasyon kitendo kimoja kitatekelezwa (tazama ufunguo complete), ambayo baada ya kipengele chenye #test kitaweka div yenye maandishi 'Animation complete.':

Chini kwenye jedwali kuna sifa na mbinu za kitu options na maelezo yake:

Jina	Maelezo
duration	Muda wa animasyon kwa millisekunde - herufi au nambari. 400ms kwa chaguo-msingi.
easing	Huweka ni kitendo gani cha ulegezaji kutumia. swing kwa chaguo-msingi.
queue	Thamani ya boolean au herufi. true kwa chaguo-msingi. Inaonyesha - kuweka animasyon kwenye foleni. Kwa thamani false animasyon itaanza mara moja. Ikiwa kigezo kitapitiwa kwa herufi, basi animasyon itawekwa kwenye foleni, inayowakilishwa na kigezo hiki. Wakati wa kutumia foleni yenye jina la mtumiaji, animasyon haitaanza moja kwa moja, ili kuianzisha - tumia dequeue('queuename').
specialEasing	Hapa unaweza kupitisha kitu, ambacho vifunguo vitakuwa sifa za CSS, na thamani - vitendo vya ulegezaji vinavyofanana navyo.
step	Kitendo, kinachoitwa kwa kila sifa iliyochezwa ya kila kipengele kilichochezwa. Kinaruhusu kubadilisha kitu Tween, ili kubadilisha thamani ya sifa kabla ya kuwekwa. Kama vigezo huchukua thamani ya sasa ya tween na kitu Tween.
progress	Kitendo, kinachoitwa baada ya kila hatua ya animasyon, moja kwa moja kwa kila kipengele bila kujali idadi ya sifa zilizochezwa. Kitendo huchukua vigezo vitatu animation (kwa umbo la ahadi), progress (nambari kutoka 0 hadi 1) na remainingMs (idadi ya millisekunde zilizobaki).
complete	Kitendo, kinachoitwa mara moja baada ya kumalizika kwa animasyon ya kipengele. Kitendo huchukua animation (kwa umbo la ahadi).
start	Kitendo, kinachoitwa wakati animasyon ya kipengele inapoanza. Kitendo huchukua animation (kwa umbo la ahadi) na jumpedToEnd (Thamani ya Boolean. Ikiwa true, basi animasyon moja kwa moja inakamilika).
done	Kitendo, kinachoitwa wakati animasyon ya kipengele inapomalizika (ahadi yake imekamilika kwa mafanikio). Kitendo huchukua animation (kwa umbo la ahadi) na jumpedToEnd (Thamani ya Boolean. Ikiwa true, basi animasyon moja kwa moja inakamilika).
fail	Kitendo, kinachoitwa wakati animasyon ya kipengele inamalizika kwa kosa (ahadi yake imekamilika kwa kosa). Kitendo huchukua animation (kwa umbo la ahadi) na jumpedToEnd (Thamani ya Boolean. Ikiwa true, basi animasyon moja kwa moja inakamilika).
always	Kitendo, kinachoitwa wakati animasyon ya kipengele inapokamilika au kusimamishwa bila kukamilika (ahadi yake imekamilika kwa mafanikio au kwa kosa). Kitendo huchukua animation (kwa umbo la ahadi) na jumpedToEnd (Thamani ya Boolean. Ikiwa true, basi animasyon moja kwa moja inakamilika).

Mfano

Wacha tuweze kubonyeza kitufe #left, tusogeze mraba wa kijani kushoto, na kitufe #right kulia kwa 50px, pia tuweke muda uendelee kwa 600ms - kwa amri slow:

Tazama pia