fadeIn နည်းလမ်း

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

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

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

.fadeIn(duration);

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

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

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

.fadeIn();

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

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

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

.fadeIn(options);

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

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

ဥပမာ

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

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

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

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

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

ဥပမာ

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

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

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

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

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

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

fadeOut နည်းလမ်း,
အစိတ်အပိုင်းများကို အလင်းပေါက်စေလျက် ညင်သာစွာဝှက်ပေးသည်
show နည်းလမ်း,
အစိတ်အပိုင်းများကို ညင်သာစွာပြသပေးသည်
slideDown နည်းလမ်း,
အစိတ်အပိုင်းများကို ညင်သာစွာပြသပေးသည်