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

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

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

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

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

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

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

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

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

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

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

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

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

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