jQuery ကျူတိုရီရယ်

jQuery ပင်မစာမျက်နှာ jQuery မိတ်ဆက် jQuery စတင်လိုက်ပါ။ jQuery Syntax jQuery ရွေးချယ်မှုများ jQuery ပွဲများ

jQuery အကျိုးသက်ရောက်မှုများ

jQuery ဖျောက်/ပြပါ။ jQuery အရောင်မှိန်ခြင်း။ jQuery Slide jQuery Animate jQuery stop() jQuery ပြန်ခေါ်ပါ။ jQuery ချိတ်ဆက်ခြင်း။

jQuery HTML

jQuery ကိုရယူပါ။ jQuery သတ်မှတ် jQuery ကိုထည့်ပါ။ jQuery ကိုဖယ်ရှားပါ။ jQuery CSS အတန်းများ jQuery css() jQuery အတိုင်းအတာများ

jQuery လမ်းလျှောက်ခြင်း။

jQuery လမ်းလျှောက်ခြင်း။ jQuery ဘိုးဘေးများ jQuery မျိုးဆက်များ jQuery မောင်နှမများ jQuery စစ်ထုတ်ခြင်း။

jQuery AJAX

jQuery AJAX နိဒါန်း jQuery Load jQuery Get/Post

jQuery ထွေ

jQuery noConflict() jQuery စစ်ထုတ်မှုများ

jQuery ဥပမာများ

jQuery ဥပမာများ jQuery စာမေးပွဲ jQuery လေ့ကျင့်ခန်းများ jQuery လက်မှတ်

jQuery ကိုးကားချက်များ

jQuery ခြုံငုံသုံးသပ်ချက် jQuery ရွေးချယ်မှုများ jQuery ပွဲများ jQuery အကျိုးသက်ရောက်မှုများ jQuery HTML/CSS jQuery လမ်းလျှောက်ခြင်း။ jQuery AJAX jQuery ထွေ jQuery ဂုဏ်သတ္တိများ

jQuery Effects - အန် နီမေးရှင်း


jQuery ဖြင့် သင်သည် စိတ်ကြိုက်ကာတွန်းများကို ဖန်တီးနိုင်သည်။



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 လေ့ကျင့်ခန်းများ

လေ့ကျင့်ခန်းများဖြင့် သင့်ကိုယ်သင် စမ်းသပ်ပါ။

လေ့ကျင့်ခန်း

animate()<div> ဒြပ်စင် 250 ပစ်ဇယ်ကို ညာဘက်သို့ ရွှေ့ရန် နည်းလမ်းကို အသုံးပြုပါ ။

$("div").animate({: ''});


jQuery Effects အကိုးအကား

jQuery အကျိုးသက်ရောက်မှုအားလုံး၏ ပြီးပြည့်စုံသောခြုံငုံသုံးသပ်ချက်အတွက်၊ ကျွန်ုပ်တို့၏ jQuery Effect ရည်ညွှန်း ချက်ကို ကျေးဇူးပြု၍ သွားပါ ။