jQuery Effects - အန် နီမေးရှင်း
jQuery ဖြင့် သင်သည် စိတ်ကြိုက်ကာတွန်းများကို ဖန်တီးနိုင်သည်။
jQuery Animations - animate() နည်းလမ်း
jQuery animate()
method ကို စိတ်ကြိုက် animations ဖန်တီးရန် အသုံးပြုပါသည်။
အထားအသို-
$(selector).animate({params},speed,callback);
လိုအပ်သော ဘောင်ဘောင်များသည် သက်ဝင်လှုပ်ရှားရန် CSS ဂုဏ်သတ္တိများကို သတ်မှတ်သည်။
ရွေးချယ်နိုင်သော အမြန်နှုန်း ကန့်သတ်ချက်သည် အကျိုးသက်ရောက်မှု၏ကြာချိန်ကို သတ်မှတ်ပေးသည်။ ၎င်းသည် အောက်ပါတန်ဖိုးများကို ယူနိုင်သည်- "နှေးကွေး", "မြန်", သို့မဟုတ် မီလီစက္ကန့်များ။
ရွေးချယ်နိုင်သော ဖုန်းခေါ်ဆိုမှု ကန့်သတ်ဘောင်သည် ကာတွန်းရုပ်ရှင်ပြီးပါက လုပ်ဆောင်ရမည့် လုပ်ဆောင်ချက်တစ်ခုဖြစ်သည်။
အောက်ဖော်ပြပါ ဥပမာသည် animate()
နည်းလမ်း၏ ရိုးရှင်းသောအသုံးပြုမှုကို သရုပ်ပြသည်၊ ၎င်းသည် 250px ၏ ဘယ်ဘက်ပိုင်ဆိုင်မှုသို့ ရောက်သည်အထိ <div> ဒြပ်စင်တစ်ခုကို ညာဘက်သို့ ရွှေ့သည်။
ဥပမာ
$("button").click(function(){
$("div").animate({left: '250px'});
});
ပုံမှန်အားဖြင့်၊ HTML ဒြပ်စင်များအားလုံးသည် တည်ငြိမ်သောအနေအထားရှိပြီး ရွှေ့၍မရပါ။
ရာထူးကို စီမံခန့်ခွဲရန်၊ ဒြပ်စင်၏ CSS ရာထူးပိုင်ဆိုင်မှုကို ဦးစွာ ဆွေမျိုး၊ ပုံသေ သို့မဟုတ် အကြွင်းမဲ့အဖြစ် သတ်မှတ်ရန် မမေ့ပါနှင့်။
jQuery animate() - များစွာသော Properties ကို Manipulate
ဂုဏ်သတ္တိများစွာကို တစ်ချိန်တည်းတွင် သက်ဝင်လှုပ်ရှားနိုင်သည်ကို သတိပြုပါ-
ဥပမာ
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
animate() method ဖြင့် CSS ဂုဏ်သတ္တိများအားလုံးကို စီမံခန့်ခွဲရန် ဖြစ်နိုင်ပါသလား။
ဟုတ်တယ်၊ နီးပါး! သို့သော်၊ မှတ်သားရန် အရေးကြီးသည့်အချက်တစ်ချက်ရှိသည်- animate() method ဖြင့်အသုံးပြုသည့်အခါ ပစ္စည်းအမည်များအားလုံးကို ကုလားအုတ်ဖြင့်ဖုံးအုပ်ထားရမည်- padding-left အစား padding-left၊ marginRight အစား margin-right စသည်တို့ဖြစ်သည်။
ထို့အပြင်၊ အရောင်ကာတွန်းကို core jQuery စာကြည့်တိုက်တွင် မပါဝင်ပါ။ သင်သည် အရောင်ကို လှုပ်ရှားလိုပါက၊ jQuery.com မှ Color Animations plugin
ကို ဒေါင်းလုဒ်လုပ်ရန် လိုအပ်ပါသည်
။
jQuery animate() - နှိုင်းရတန်ဖိုးများကို အသုံးပြုခြင်း။
နှိုင်းရတန်ဖိုးများကို သတ်မှတ်ရန်လည်း ဖြစ်နိုင်သည် (ထို့နောက် တန်ဖိုးသည် ဒြပ်စင်၏ လက်ရှိတန်ဖိုးနှင့် ဆက်စပ်နေသည်)။ တန်ဖိုး၏ရှေ့တွင် += သို့မဟုတ် -= ကိုထည့်ခြင်းဖြင့်လုပ်ဆောင်သည်-
ဥပမာ
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery animate() - ကြိုတင်သတ်မှတ်ထားသောတန်ဖိုးများကို အသုံးပြုခြင်း။
ပိုင်ဆိုင်မှု၏ ကာတွန်းတန်ဖိုးကို " show
" " " hide
" ၊ သို့မဟုတ် " toggle
" :
ဥပမာ
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
jQuery animate() - Queue Functionality ကို အသုံးပြုသည်။
ပုံသေအားဖြင့်၊ jQuery သည် ကာတွန်းများအတွက် တန်းစီလုပ်ဆောင်နိုင်စွမ်း ပါရှိသည်။
ဆိုလိုတာက animate()
တစ်ခုနဲ့တစ်ခု ခေါ်ဆိုမှုများစွာကို ရေးသားပါက၊ jQuery သည် ဤနည်းလမ်းခေါ်ဆိုမှုများဖြင့် "အတွင်းပိုင်း" တန်းစီခြင်းကို ဖန်တီးပေးပါသည်။ ထို့နောက် ၎င်းသည် ONE by ONE ဟုခေါ်သော ကာတွန်းကို လုပ်ဆောင်သည်။
ထို့ကြောင့်၊ တစ်ခုနှင့်တစ်ခု မတူညီသောကာတွန်းများကို လုပ်ဆောင်လိုပါက၊ ကျွန်ုပ်တို့သည် တန်းစီခြင်းလုပ်ဆောင်ချက်ကို အခွင့်ကောင်းယူပါသည်-
ဥပမာ ၁
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
အောက်ဖော်ပြပါ ဥပမာသည် ပထမ <div>
အချက်အား ညာဘက်သို့ ရွှေ့ပြီးနောက် စာသား၏ ဖောင့်အရွယ်အစားကို တိုးစေသည်-
ဥပမာ ၂
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
jQuery လေ့ကျင့်ခန်းများ
jQuery Effects အကိုးအကား
jQuery အကျိုးသက်ရောက်မှုအားလုံး၏ ပြီးပြည့်စုံသောခြုံငုံသုံးသပ်ချက်အတွက်၊ ကျွန်ုပ်တို့၏ jQuery Effect ရည်ညွှန်း ချက်ကို ကျေးဇူးပြု၍ သွားပါ ။