animate method

animate method သည် CSS-ဂုဏ်သတ္တိအမျိုးမျိုးအတွက် animation အကျိုးသက်ရောက်မှုများကို ဖန်တီးခွင့်ပြုသည်။ တစ်ခုတည်းသော မဖြစ်မနေလိုအပ်သည့် parameter မှာ CSS-ဂုဏ်သတ္တိများပါဝင်သော object တစ်ခုဖြစ်ပြီး ကျွန်ုပ်တို့css method ထဲသို့ ပေးပို့သည့်အရာနှင့် ဆင်တူသည်။ jQuery ၏ အခြေခံလုပ်ဆောင်ချက်ဖြင့် ဂဏန်းမဟုတ်သောတန်ဖိုးများ သို့မဟုတ် တန်ဖိုးများစွာရှိသည့် ဂုဏ်သတ္တိများစွာကို သက်ဝင်လှုပ်ရှားအောင် မလုပ်နိုင်ပါ (ဥပမာbackground-color)။ CSS-ဂုဏ်သတ္တိများ၏ အတိုကောက်အမည်များကိုလည်း အမြဲတမ်း ထောက်ပံ့ထားခြင်းမရှိပါ၊ ဥပမာfont - ၎င်းအစားfontSize သို့မဟုတ်font-size ကိုအသုံးပြုရပါမည်။ တန်ဖိုးများရှေ့တွင် '+=' သို့မဟုတ် '-=' ကိုထားနိုင်ပြီး၊ ထိုသို့ဆိုလျှင် နောက်ထပ်ဖော်ပြထားသည့် တန်ဖိုးကို လက်ရှိဂုဏ်သတ္တိတန်ဖိုးမှ ပေါင်းထည့်မည် သို့မဟုတ် နုတ်ပစ်မည်ဖြစ်သည်။ ထို့အပြင် ဂဏန်းတန်ဖိုးများအစား show, hide သို့မဟုတ်toggle ကိုလည်းထားနိုင်သည်။ jQuery အကျိုးသက်ရောက်မှုအားလုံးကိုanimate အပါအဝင်၊ အချိန်ကြာမြင့်မှုကို 0 သို့သတ်မှတ်သည့် ကိုယ်ရေးကိုယ်တာjQuery.fx.off = true ကိုအသုံးပြု၍ ကမ္ဘာလုံးဆိုင်ရာအားဖြင့် ပိတ်ထားနိုင်သည်။

ဝါကျဖွဲ့ပုံ

Animation ၏ ပထမဆုံး parameter အဖြစ် CSS-ဂုဏ်သတ္တိများနှင့်key: value format တွင်ရှိသည့် ၎င်းတို့၏တန်ဖိုးများ ပါဝင်သည့် object တစ်ခုကို ပေးပို့သည်၊ ကျွန်ုပ်တို့သည် ထိုဂုဏ်သတ္တိများကို သက်ဝင်လှုပ်ရှားစေရန် ရည်ရွယ်သည်။ ကျန်သော parameter များကို မဖြစ်မနေလိုအပ်ခြင်းမရှိဟု ယူဆသည်။ ဒုတိယ parameter မှာ animation ၏ အချိန်ကြာမြင့်မှုကို မီလီစက္ကန့်ဖြင့် သတ်မှတ်ပေးသည်၊ ပုံသေအားဖြင့်400ms ဖြစ်သည်။ တတိယ parameter မှာ အကူးအပြောင်းအတွက် ချောမွေ့သည့် function (default အားဖြင့်swing) ဖြစ်ပြီး၊ စတုတ္ထမြောက်မှာ animation ပြီးဆုံးပါက စတင်အလုပ်လုပ်မည့် callback function ဖြစ်သည်:

.animate(properties, [duration ], [easing function ], [callback function ]);

အချိန်ကို မီလီစက္ကန့်ဖြင့်သာမက slow (600ms) နှင့်fast (200ms) ဟူသည့် သော့ချက်စကားလုံးများဖြင့်လည်း သတ်မှတ်နိုင်သည်၊ တန်ဖိုးကြီးလေလေ၊ animation နှေးလေလေဖြစ်သည်။ Method ကိုkey: value စုံတွဲများ ပါဝင်သည့် JavaScript object ပုံစံဖြင့် ရွေးချယ်စရာများကိုလည်း ဒုတိယ parameter အဖြစ် ပေးပို့နိုင်သည်:

.animate(properties, options);

ဥပမာအားဖြင့်၊ CSS-ဂုဏ်သတ္တိများwidth နှင့်height အတွက် တန်ဖိုးtoggle ကိုသတ်မှတ်ပါမည်။ အချိန်ကြာမြင့်မှုကို5000ms အပေါ်တွင်၊ ချောမွေ့သည့် function များကို object ပုံစံဖြင့် ပေးပို့ပါမည်၊ အကျယ်အတွက် ဤသည်မှာ မျဉ်းဖြောင့် function ဖြစ်ပြီး အမြင့်အတွက်easeOutBounce ဖြစ်လိမ့်မည်၊ ထို့အပြင် animation ပြီးဆုံးသွားသောအခါ ကျွန်ုပ်တို့၏ function သည် တစ်ကြိမ်အလုပ်လုပ်မည် (complete ဟူသည့် သော့ကိုကြည့်ပါ)၊ ထို function သည်#test ရှိသည့် element ပြီးနောက်'Animation complete.' ဟူသည့် စာသားပါသည့် div ကိုထားရှိမည်:

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

အောက်တွင်ဇယားတွင်options object ၏ ဂုဏ်သတ္တိများနှင့် method များနှင့် ၎င်းတို့၏ဖော်ပြချက်ကို ဖော်ပြထားသည်:

အမည်	ဖော်ပြချက်
`duration`	မီလီစက္ကန့်ဖြင့် animation ၏ အချိန်ကြာမြင့်မှု - စာကြောင်း သို့မဟုတ် ဂဏန်း။ ပုံသေအားဖြင့်`400ms`။
`easing`	မည်သည့်ချောမွေ့သည့် function ကိုအသုံးပြုရမည်ကို သတ်မှတ်ပေးသည်။ ပုံသေအားဖြင့်`swing`။
`queue`	ဘူလီယံတန်ဖိုး သို့မဟုတ် စာကြောင်း။ ပုံသေအားဖြင့်`true`။ ညွှန်ပြသည် - animation ကို ဆင့်ကဲအစီအစဥ်ထဲတွင် ထားရှိမည်လား။ တန်ဖိုး`false` ဖြစ်ပါက animation သည် ချက်ချင်းစတင်လိမ့်မည်။ အကယ်၍ parameter ကို စာကြောင်းတစ်ကြောင်းအဖြစ်ပေးပို့ပါက၊ animation သည် ဤ parameter ဖြင့် ကိုယ်စားပြုသည့် ဆင့်ကဲအစီအစဥ်ထဲတွင် ထားရှိမည်။ စိတ်ကြိုက်အမည်ရှိသည့် ဆင့်ကဲအစီအစဥ်ကိုအသုံးပြုသောအခါ၊ animation သည် အလိုအလျောက်စတင်မည်မဟုတ်ပါ၊ ၎င်းကိုစတင်ရန် `dequeue('queuename')` ကိုအသုံးပြုပါ။
`specialEasing`	ဤနေရာတွင် သင်သည် object တစ်ခုကို ပေးပို့နိုင်သည်၊ ထို object တွင် သော့များသည် CSS-ဂုဏ်သတ္တိများဖြစ်ပြီး တန်ဖိုးများသည် ၎င်းတို့နှင့်သက်ဆိုင်သည့် ချောမွေ့သည့် function များဖြစ်မည်။
`step`	Function တစ်ခုဖြစ်ပြီး၊ ၎င်းကို သက်ဝင်လှုပ်ရှားသည့် element တစ်ခုစီ၏ သက်ဝင်လှုပ်ရှားသည့် ဂုဏ်သတ္တိတစ်ခုစီအတွက် ခေါ်ယူသည်။ ၎င်းသည် `Tween` object ကို ပြုပြင်မွမ်းမံရန် ခွင့်ပြုသည်၊ ဂုဏ်သတ္တိတန်ဖိုးကို သတ်မှတ်မချိန်မီ ပြောင်းလဲရန်။ Parameter အဖြစ်`tween` ၏လက်ရှိတန်ဖိုးနှင့် `Tween` object ကိုလက်ခံသည်။
`progress`	Function တစ်ခုဖြစ်ပြီး၊ animation အဆင့်တစ်ခုစီပြီးနောက် ခေါ်ယူသည်၊ သက်ဝင်လှုပ်ရှားသည့် ဂုဏ်သတ္တိအရေအတွက်နှင့်မဆိုင်ဘဲ element တစ်ခုစီအတွက် တစ်ကြိမ်တည်းသာ။ Function သည် parameter သုံးခုကိုလက်ခံသည်`animation` (ကတိကဝတ်အဖြစ်), `progress` (`0` မှ`1` ထိ ဂဏန်း) နှင့်`remainingMs` (ကျန်ရှိသော မီလီစက္ကန့်အရေအတွက်)။
`complete`	Function တစ်ခုဖြစ်ပြီး၊ element ၏ animation ပြီးဆုံးပါက တစ်ကြိမ်ခေါ်ယူသည်။ Function သည်`animation` (ကတိကဝတ်အဖြစ်) ကိုလက်ခံသည်။
`start`	Function တစ်ခုဖြစ်ပြီး၊ element ၏ animation စတင်သောအခါ ခေါ်ယူသည်။ Function သည်`animation` (ကတိကဝတ်အဖြစ်) နှင့် `jumpedToEnd` (ဘူလီယံတန်ဖိုး။ အကယ်၍`true` ဖြစ်ပါက၊ animation သည် အလိုအလျောက် ပြီးဆုံးသွားမည်) ကိုလက်ခံသည်။
`done`	Function တစ်ခုဖြစ်ပြီး၊ element ၏ animation ပြီးဆုံးသောအခါ (၎င်း၏ကတိကဝတ်သည် အောင်မြင်စွာ ပြီးဆုံးသွားသောအခါ) ခေါ်ယူသည်။ Function သည်`animation` (ကတိကဝတ်အဖြစ်) နှင့် `jumpedToEnd` (ဘူလီယံတန်ဖိုး။ အကယ်၍`true` ဖြစ်ပါက၊ animation သည် အလိုအလျောက် ပြီးဆုံးသွားမည်) ကိုလက်ခံသည်။
`fail`	Function တစ်ခုဖြစ်ပြီး၊ element ၏ animation အမှားတစ်ခုနှင့်အတူပြီးဆုံးသောအခါ (၎င်း၏ကတိကဝတ် အမှားတစ်ခုနှင့်အတူပြီးဆုံးသောအခါ) ခေါ်ယူသည်။ Function သည်`animation` (ကတိကဝတ်အဖြစ်) နှင့် `jumpedToEnd` (ဘူလီယံတန်ဖိုး။ အကယ်၍`true` ဖြစ်ပါက၊ animation သည် အလိုအလျောက် ပြီးဆုံးသွားမည်) ကိုလက်ခံသည်။
`always`	Function တစ်ခုဖြစ်ပြီး၊ element ၏ animation ပြီးဆုံးသွားသောအခါ သို့မဟုတ် ပြီးဆုံးခြင်းမရှိဘဲ ရပ်တန့်သွားသောအခါ (၎င်း၏ကတိကဝတ်သည် အောင်မြင်စွာ သို့မဟုတ် အမှားတစ်ခုနှင့်အတူပြီးဆုံးသောအခါ) ခေါ်ယူသည်။ Function သည်`animation` (ကတိကဝတ်အဖြစ်) နှင့် `jumpedToEnd` (ဘူလီယံတန်ဖိုး။ အကယ်၍`true` ဖြစ်ပါက၊ animation သည် အလိုအလျောက် ပြီးဆုံးသွားမည်) ကိုလက်ခံသည်။

ဥပမာ

အခါ#left ခလုတ်ကိုနှိပ်သောအခါ၊ အစိမ်းရောင်စတုရန်းကို ဘယ်ဘက်သို့ရွှေ့ပါမည်၊ ခလုတ်#right ကိုနှိပ်သောအခါ ညာဘက်50px သို့၊ ထို့အပြင် အချိန်ကြာမြင့်မှုကို 600ms - slow command ဖြင့် သတ်မှတ်ပါမည်:

<button id="left">ဘယ်ဘက်</button>
<button id="right">ညာဘက်</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');
});

ထပ်မံကြည့်ရှုရန်

method show,
အရာသည် element များကို ချောမွေ့စွာပြသသည်
method stop,
အရာသည် စတင်ထားသည့် animation ကိုရပ်တန့်ရန် ခွင့်ပြုသည်
method delay,
အရာသည် event များလုပ်ဆောင်မှုအတွက် နှောင့်နှေးမှုကိုသတ်မှတ်ပေးသည်
property jQuery.fx.off,
အရာသည် animation ကို ကမ္ဘာလုံးဆိုင်ရာအားဖြင့် ပိတ်ထားရန် ခွင့်ပြုသည်
selector animated,
အရာသည် element များကိုရွေးချယ်သည်၊ ၎င်းတို့သည် လက်ရှိအချိန်တွင် animation တွင်ပါဝင်နေသည်