jQuery ရှိ animate နည်းလမ်း

ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့ဆွေးနွေးခဲ့သည့် နည်းလမ်းအားလုံးသည် အနည်းငယ်ကန့်သတ်ချက်ရှိပါသည် - ၎င်းတို့ကို ဖန်တီးထားသည့်အတိုင်း လုပ်ဆောင်ပါသည်။ အကယ်၍ သင်သည် ကာတွန်းရုပ်ရုပ်ရှင်ထိန်းချုပ်မှုကို ပိုမိုလိုအပ်ပါက အထွေထွေနည်းလမ်းဖြစ်သော animate ကို အသုံးပြုပါ။

ဤနည်းလမ်းသည် ပထမဆုံးပါရာမီတာအဖြစ် object ကို လက်ခံပြီး၊ ထို object တွင် သင်ကာတွန်းရုပ်ရုပ်ရှင်ဖြစ်စေလိုသော CSS ဂုဏ်သတ္တိများ၏ အသစ်တန်ဖိုးများကို သတ်မှတ်ရပါမည်။ ဒုတိယပါရာမီတာအဖြစ် ကာတွန်းရုပ်ရုပ်ရှင်လုပ်ဆောင်ချက်၏ အချိန်ကို သတ်မှတ်ရပါမည်။

အောက်ပါ HTML code အပေါ်တွင် ဤနည်းလမ်းကို အကောင်အထည်ဖော်ကြည့်ရအောင်။

<button id="button">click me</button>
<div id="elem">text...</div>

CSS ကို ဤသို့ပုံစံထားပါစို့။

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}

ခလုတ်ကိုနှိပ်လိုက်သောအခါ element သည် အောက်ပါအတိုင်း အရွယ်အစားသေးငယ်သွားပါစေ၊ အမြင့် - 50px, အကျယ် - 100px။

$('#button').click(function() {
	$('#elem').animate({height: 50, width: 100}, 1000);
});

အကယ်၍ တန်ဖိုးကို ဤပုံစံဖြင့် သတ်မှတ်ပါက height: '+=50'၊ ထိုအခါ ကာတွန်းရုပ်ရုပ်ရှင်သည် ဤသို့လုပ်ဆောင်ပါမည်။ လက်ရှိအမြင့်တန်ဖိုးထံသို့ 50px (ကျွန်ုပ်တို့၏ကိစ္စတွင်) ကို ပေါင်းထည့်မည်ဖြစ်ပြီး element သည် ချောမွေ့စွာ ကာတွန်းရုပ်ရုပ်ရှင်ဖြစ်ကာ အသစ်သောတန်ဖိုးသို့ ရောက်ရှိသွားပါမည်။ ဥပမာတစ်ခုတွင် ကြည့်ရအောင်။

$('#button').click(function() {
	$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

animate နည်းလမ်းအကြောင်း အသေးစိတ်ကို jQuery လမ်းညွှန်စာအုပ်တွင် ကြည့်ရှုပါ။

animate

ဤကဲ့သို့သော ဝဘ်ဒီဇိုင်းရှိပါသည်။

<body>
	<div id="block"></div>
</body>

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

#block ရှိ div ပေါ်တွင် နှိပ်လိုက်သောအခါ ၎င်း၏အကျယ်သည် 200px အထိ 1100ms အတွင်း တိုးလာပါစေ။

ပထမပုစ္ဆာမှ ဝဘ်ဒီဇိုင်းကို အသုံးပြုပါ။ #block ရှိ div ပေါ်ကို အကြိမ်တိုင်း နှိပ်လိုက်သောအခါ ၎င်း၏အကျယ်သည် 200px စီ တိုးလာပြီး အကြိမ်တိုင်းသော ထိုသို့တိုးလာခြင်းသည် 900ms အတွင်း ဖြစ်ပျက်ပါစေ။

ပထမပုစ္ဆာမှ ဝဘ်ဒီဇိုင်းကို အသုံးပြုပါ။ #block ရှိ div ပေါ်ကို အကြိမ်တိုင်း နှိပ်လိုက်သောအခါ ၎င်း၏အကျယ်နှင့် အမြင့်သည် 100px စီ တိုးလာပြီး အကြိမ်တိုင်းသော ထိုသို့တိုးလာခြင်းသည် 950ms အတွင်း ဖြစ်ပျက်ပါစေ။

ပထမပုစ္ဆာမှ ဝဘ်ဒီဇိုင်းကို အသုံးပြုပါ။ #block ရှိ div ပေါ်ကို အကြိမ်တိုင်း နှိပ်လိုက်သောအခါ၊ ၎င်းသည် ညာဘက်သို့ 100px ရွှေ့သွားပြီး အကြိမ်တိုင်းသော ထိုသို့ရွှေ့ခြင်းသည် 700ms အတွင်း ဖြစ်ပျက်ပါစေ။