fadeOut နည်းလမ်း

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

ဖွဲ့စည်းပုံ

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

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

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

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

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

.fadeOut();

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

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

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

.fadeOut(options);

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

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

ဥပမာ

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

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

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

fadeIn နည်းလမ်း,
အရာသည် ဝှက်ထားသော အစိတ်အပိုင်းများကို ဖြည်းညင်းစွာ ပြသပေးပြီး ၎င်းတို့ကို အလင်းပေါက် မဟုတ်အောင် ပြုလုပ်ပေးသည်
hide နည်းလမ်း,
အရာသည် အစိတ်အပိုင်းများကို ဖြည်းညင်းစွာ ဝှက်ပေးသည်
slideUp နည်းလမ်း,
အရာသည် အစိတ်အပိုင်းများကို ဖြည်းညင်းစွာ ဝှက်ပေးသည်