fadeOut နည်းလမ်း

fadeOut နည်းလမ်းသည် အစိတ်အပိုင်းများကို ဖြည်းညင်းစွာ ဝှက်ပေးသည်။ အစိတ်အပိုင်းများကို fadeIn နည်းလမ်းကို အသုံးပြု၍ ၎င်းတို့ကို အလင်းပေါက် မဟုတ်အောင် ပြသနိုင်သည်။

ဖွဲ့စည်းပုံ

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

javascript.fadeOut(ကြာချိန်);

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

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

အကန့်အသတ်များ မဖော်ပြပါက - ဇာတ်လမ်းပို့ချက် မရှိပါ၊ အစိတ်အပိုင်းများသည် ချက်ချင်း ပျောက်ကွယ်သွားမည်:

javascript.fadeOut();

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

javascript.fadeOut(ကြာချိန်, [ချောမွေ့သော လုပ်ဆောင်ချက်], [callback-လုပ်ဆောင်ချက်]);

သင်္ကေတများကို နည်းလမ်းသို့ ပို့နိုင်သည်၊ JavaScript အရာဝတ္ထုပုံစံဖြင့်၊ သော့: တန်ဖိုး စုံတွဲများပါဝင်သည်:

javascript.fadeOut(options);

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

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

ဥပမာ

အောက်ပါ ဥပမာတွင် ခလုတ် #hide ကို နှိပ်လိုက်သောအခါ #test ပါဝင်သော အစိတ်အပိုင်းသည် 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 ကို ပြသသည့်အခါ ကျွန်ုပ်တို့သည် စာသား '!' ပါသော မက်ဆေ့ချ်ကို ထုတ်ပြမည်၊ ပျောက်ကွယ်သွားသည့်အခါမူ စာသား '?' ပါသော မက်ဆေ့ချ်ကို ထုတ်ပြမည်:

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('?');
  });
});

ဒါလည်း ကြည့်ပါ