animate metodu

animate metody dürli CSS häsiýetleri üçin animasiýa effektlerini döretmäge mümkinçilik berýär. Gerekli bolan ýeke-täk parametr – biz css metoduna geçirýänimize meňzeýän, animasiýalaýan CSS häsiýetleriniň we olaryň gymmatlyklarynyň jady. Köp häsiýetler, san däl bahalary ýa-da birnäçe bahalary bolsa, jQuery-niň esasy funksionallary bilen animasiýalaýip bolmaýar (meselem background-color). Şeýle-de, ähli wagt gysgaldylan CSS häsiýetleriniň atlary goldanylmaýar, meselem font – onuň ýerine fontSize ýa-da font-size ulanylmagy gerek. Bahalaryň öňüne '+=' ýa-da '-=' goýup bolýar, şeýle bolanda, soňrak görkezilen baha häsiýetiň häzirki bahasyna goşular ýa-da ondan aýrylar. Şeýle-de, san bahalaryň ýerine show, hide ýa-da toggle goýup bolýar. animate-de goşmak bilen ähli jQuery effektlerini, jQuery.fx.off = true sazlanyşyny ulanmak arkaly, ýönekeýlikde öçürip bolýar, bu bolsa dowamlylygyň bahasyny 0 edip goýýar.

Sintaksis

Animasiýanyň birinji parametri hökmünde biz animasiýalaýan CSS häsiýetleriniň we olaryň açar: baha formatyndaky bahalarynyň jady geçirilýär. Galan parametrler gerekli däl diýlip hasaplanýar. Ikinji parametr – animasiýanyň dowamlylygyny millisekuntlarda kesgitleýär, bellenen bahasy 400ms. Üçünji parametr – geçiş üçin ýumşaklyk funksiýasy (bellenen swing), dördünji parametr bolsa – animasiýa ýerine ýetirilenden soň işjeňleşdiriljek callback-funksiýa:

Wagt diňe millisekuntlarda däl, eýsem slow (600ms) we fast (200ms) açar sözleri bilen hem kesgitlenip bilner, baha uly boldugyça animasiýa haýal. Metoda ikinji parametr hökmünde açar: baha jübütlerini öz içine alýan JavaScript jadynyň görnüşinde dürli opsiýalar geçirip bolýar:

Meselem, CSS häsiýetleri width we height üçin toggle bahasyny belleýäris. Dowamlylygy 5000ms, ýumşaklyk funksiýalaryny jadynyň görnüşinde geçireris, ini üçin bu çyzyk funksiýasy bolup, beýiklik üçin bolsa easeOutBounce bolup biler, şeýle hem animasiýa tamamlananyndan soň bizde bir gezek funksiýa ýerine ýetirer (complete açaryna seret), bu funksiýa #test elementi bilen soňra 'Animation complete.'⁅/s ⁆ ýazgysy bolan div ýerleşdirer:

$('#test').animate({ width: 'toggle', height: 'toggle' }, { duration: 5000, specialEasing: { width: 'linear', height: 'easeOutBounce' }, complete: function() { $(this).after('<div>Animation complete.</div>'); } });

Aşakdaky tablisada options⁅/c ⁆ obýektiň häsiýetleri we metodlary we olaryň düşündirişi görkezilýär:

Ady	Düşündiriş
duration	Millisekuntlardaky animasiýanyň dowamlylygy – setir ýa-da san. Bellenen bahasy 400ms.
easing	Haýsy ýumşaklyk funksiýasyny ulandygyňyzy kesgitläp berýär. Bellenen bahasy swing.
queue	Bul baha ýa-da setir. Bellenen bahasy true. Animasiýany nädip goýmaklygy görkezýär – sargyt hataryna. false bahasy bolsa animasiýanyň göz galyksyz başlanjakdygyny görkezýär. Eger parametr setir hökmünde geçirilse, onda animasiýa bu parametr bilen görkezilen sargyt hataryna goýlar. Ulanyjy atly sargyt hataryny ulanmak bilen animasiýa awtomatiki başlanmaýar, ony başlatmak üçin – dequeue('queuename') ulanyň.
specialEasing	Bu ýerde, açarlary CSS häsiýetleri, bahalary bolsa olara laýyk gelýän ýumşaklyk funksiýalary bolan jady geçirip bilersiňiz.
step	Her animasiýalaşdyrylan element üçin her animasiýalaşdyrylan häsiýet üçin çagyrylan funksiýa. Ol häsiýetiň bahasyny ony belläninden öň üýtgetmek üçin Tween obýektini üýtgetmäge mümkinçilik berýär. Parametrler hökmünde häzirki tween bahasyny we Tween obýektini kabul edýär.
progress	Animasiýanyň her ädiminden soň çagyrylan funksiýa, animasiýalaşdyrylan häsiýetleriň sanyndan garamazdan, her element üçin ýeke-täk gezek çagyrylar. Funksiýa üç parametr kabul edýär animation (wada görnüşinde), progress (0-den 1⁅/n ⁆-e çenli san) we remainingMs (galan millisekuntlaryň sany).
complete	Elementiň animasiýasy gutaran badyna ýeke-täk gezek çagyrylan funksiýa. Funksiýa animation (wada görnüşinde) kabul edýär.
start	Elementiň animasiýasy başlananda çagyrylan funksiýa. Funksiýa animation (wada görnüşinde) we jumpedToEnd (Bul baha. Eger true bolsa, onda animasiýa awtomatiki gutarýar) kabul edýär.
done	Elementiň animasiýasy gutaranda (onuň wadasy üstünlikli ýerine ýetirilende) çagyrylan funksiýa. Funksiýa animation (wada görnüşinde) we jumpedToEnd (Bul baha. Eger true bolsa, onda animasiýa awtomatiki gutarýar) kabul edýär.
fail	Elementiň animasiýasy ýalňyşlyk bilen gutaranda (onuň wadasy ýalňyşlyk bilen ýerine ýetirilende) çagyrylan funksiýa. Funksiýa animation (wada görnüşinde) we jumpedToEnd (Bul baha. Eger true bolsa, onda animasiýa awtomatiki gutarýar) kabul edýär.
always	Elementiň animasiýasy gutaranda ýa-da tamamlanmazdan togtadlanda (onuň wadasy üstünlikli ýa-da ýalňyşlyk bilen ýerine ýetirilende) çagyrylan funksiýa. Funksiýa animation (wada görnüşinde) we jumpedToEnd (Bul baha. Eger true bolsa, onda animasiýa awtomatiki gutarýar) kabul edýär.

Mysal

Geliň, #left düwmesine basylanynda, ýaşyl inedördüli 50px çepe süýşürelin, #right düwmesine basylanynda bolsa sag tarapa 50px süýşürelin, şeýle hem dowamlylygy 600ms – slow buýrugy bilen belleyäliň:

<button id="left">çep</button> <button id="right">sag</button> <div class="block"></div> div { position: absolute; background-color: green; left: 50px; width: 100px; height: 100px; margin: 5px; } $('#right').click(function() { $('.block').animate({'left': '+=50px'}, 'slow'); }); $('#left').click(function() { $('.block').animate({'left': '-=50px'}, 'slow'); });

Şeýle-de serediň

• show metodu,
  elementleri ýumşak görkezýän
• stop metodu,
  işjeň animasiýany togtatmagy mümkin edýän
• delay metodu,
  wakalaryň ýerine ýetirilişiniň gecikmesini belleýän
• jQuery.fx.off häsiýeti,
  animasiýany ýönekeýlikde öçürmäge mümkinçilik berýän
• animated saýlaýjysy,
  häzirki wagtda animasiýa işjeň bolan elementleri saýlaýan