နည်းလမ်း fadeToggle

နည်းလမ်း fadeToggle သည် အရာဝတ္ထုများ၏ ဖြောင့်တန်းမှုကို သက်ဝင်လှုပ်ရှားစေလျက် ၎င်းတို့ကို အလှည့်ကျ ဖြေးညှင်းစွာ ပြသပေးခြင်း သို့မဟုတ် ပုန်းကွယ်ပေးခြင်း ပြုလုပ်သည်။

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

သတ်မှတ်ထားသော အချိန်အတွင်း ပြသခြင်း/ပုန်းကွယ်ခြင်း၊ စံအနေနှင့် ၄၀၀မစ် ဖြစ်သည်။

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

အချိန်ကို မစ်လီစက္ကန့်များဖြင့်သာမက သော့ချက်စကားလုံးများဖြစ်သော slow (၆၀၀မစ်) နှင့် fast (၂၀၀မစ်) တို့ဖြင့်လည်း သတ်မှတ်နိုင်သည်၊ တန်ဖိုးကြီးလေ သက်ဝင်လှုပ်ရှားမှုနှေးလေဖြစ်သည်။

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

အကယ်၍ သတ်မှတ်ချက်များ မဖော်ပြပါက - သက်ဝင်လှုပ်ရှားမှု မရှိပါ၊ အရာဝတ္ထုများသည် ချက်ချင်းပင် ပေါ်လာပြီး/ပျောက်သွားလိမ့်မည်။

javascript.fadeToggle();

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

javascript.fadeToggle(ကြာချိန်, [ဖြောင့်တန်းမှုလုပ်ဆောင်ချက်], [callback-လုပ်ဆောင်ချက်]);

မတူညီသော ရွေးချယ်ခွင့်များကို နည်းလမ်းသို့ ပေးပို့နိုင်သည်၊ JavaScript object တစ်ခု၏ ပုံစံဖြင့်၊ ၎င်းတွင် အတွဲများ key: value ပါဝင်သည်။

javascript.fadeToggle(options);

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

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

ဥပမာ

အောက်ပါဥပမာတွင် ခလုတ် #toggle ကို ပထမအကြိမ် နှိပ်လိုက်သည့်အခါ #test နှင့်အတူ အရာဝတ္ထုသည် ပုန်းကွယ်သွားမည်၊ နောက်တစ်ကြိမ် နှိပ်လိုက်သည့်အခါ - ပေါ်လာမည်။ ၎င်းအတွက် ကျွန်ုပ်တို့သည် နည်းလမ်း fadeToggle ကို အသုံးပြုသည်။ ထို့အပြင် ကျွန်ုပ်တို့သည် အရှိန်ကို ၁၀၀၀မစ် အထိ သတ်မှတ်ပြီး ဖြောင့်တန်းမှုလုပ်ဆောင်ချက်၏ တန်ဖိုးကို linear အဖြစ် သတ်မှတ်ပါမည်။

html<button id="toggle">toggle</button>
<div id="test"></div>

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

javascript$('#toggle').on('click', function() {
  $('#test').fadeToggle(1000, 'linear');
});

ဤသည်ကိုလည်း ကြည့်ပါ