fadeIn နည်းလမ်း

fadeIn နည်းလမ်းသည် ဝှက်ထားသော အစိတ်အပိုင်းများကို မထင်မရှားဖြစ်စေကာ ညင်သာစွာပြသပေးသည်။ အစိတ်အပိုင်းများကို fadeOut နည်းလမ်းဖြင့် ဝှက်ထားနိုင်ပြီး၊ အလင်းပေါက် (transparent) အဖြစ်ပြောင်းလဲနိုင်သည်။

ဝါကျဖွဲ့စည်းပုံ

သတ်မှတ်ထားသောအချိန်အတွင်း ပြသခြင်း၊ စံသတ်မှတ်ချက်အားဖြင့် 400ms:

javascript.fadeIn(duration);

အချိန်ကို မီလီစက္ကန့်ဖြင့်သာမက slow (600ms) နှင့် fast (200ms) ဟူသော သော့ချက်စကားလုံးများဖြင့်လည်း သတ်မှတ်နိုင်သည်။ တန်ဖိုးကြီးလေ၊ animation နှေးလေဖြစ်သည်:

javascript.fadeIn('slow' သို့မဟုတ် 'fast');

အကြောင်းအရာများ (parameters) မဖော်ပြပါက - animation မရှိဘဲ၊ အစိတ်အပိုင်းများသည် ချက်ချင်းပေါ်လာမည်ဖြစ်သည်:

javascript.fadeIn();

ဒုတိယ parameter အဖြစ် အသွင်ပြောင်းလဲမှုလုပ်ဆောင်ချက် (easing function) ကို ပေးပို့နိုင်သည်၊ ထို့အပြင် တတိယ parameter အဖြစ် callback function - animation ပြီးဆုံးပါက အလုပ်လုပ်မည်။ parameter နှစ်ခုလုံးသည် မဖြစ်မနေပေးရန်မလိုပါ:

javascript.fadeIn(duration, [easing function], [callback function]);

နည်းလမ်းသို့ ရွေးချယ်စရာ (options) အမျိုးမျိုးကို JavaScript object ပုံစံဖြင့် ပေးပို့နိုင်သည်။ ထို object တွင် key: value စုံတွဲများပါဝင်သည်:

javascript.fadeIn(options);

ထိုကဲ့သို့သော object သည် အောက်ပါ parameters များနှင့် functions များကို ပို့နိုင်သည် - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always။ ထို parameters များ၏ ဖော်ပြချက်ကို animate နည်းလမ်းအတွက် ကြည့်ရှုနိုင်သည်။ ဥပမာအားဖြင့်၊ ကြာချိန်နှင့် အသွင်ပြောင်းလဲမှုလုပ်ဆောင်ချက်ကို သတ်မှတ်ကြည့်ပါမည်:

javascript.fadeIn( {duration: 800, easing: easeInSine} );

ဥပမာ

အောက်ပါဥပမာတွင် #hide ခလုတ်ကို နှိပ်လိုက်သောအခါ #test element သည် fadeOut နည်းလမ်းဖြင့် ပျောက်ကွယ်သွားမည်။ #show ခလုတ်ကို နှိပ်လိုက်သောအခါမူ fadeIn နည်းလမ်းဖြင့် ပြသပေးမည်။ အရှိန်ကို 1000ms အဖြစ် သတ်မှတ်ထားသည်:

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000);
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000);
});

ဥပမာ

အောက်ပါဥပမာတွင် #test element ကို ပြသသည့် animation ပြီးဆုံးသွားသောအခါ '!' စာသားပါ သတိပေးချက် (alert) တစ်ခုကို ထုတ်ပြမည်။ ဝှက်လိုက်သောအခါမူ '?' စာသားပါ သတိပေးချက်ကို ထုတ်ပြမည်:

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

ဆက်လက်ဖတ်ရှုရန်