jQuery တွင် အကျိုးသက်ရောက်မှု ပြီးဆုံးပြီးနောက် လုပ်ဆောင်ချက်

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

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

အောက်ပါ ဥပမာကို ကြည့်ပါ။ ကျွန်ုပ်တို့တွင် အောက်ပါ HTML ကုဒ်ရှိသည်ဟု ဆိုကြပါစို့။

<button id="hide">hide</button>
<div id="elem">text...</div>

ဤကုဒ်အတွက် CSS ကို ရေးသားထားပါသည်။

#elem {
	padding: 10px;
	width: 150px;
	height: 150px;
	border: 1px solid green;
	margin-top: 10px;
}

Javascript ကုဒ်သည် ဤကဲ့သို့ ပုံစံရှိပါသည်။

$('#hide').click(function() {
	$('#elem').hide(1000);
	$('#hide').html('hidden');
});

ထိုကဲ့သို့သော ပြဿနာများကို ရှောင်ရှားရန်၊ အန်နီမေးရှင်းနှင့် အကျိုးသက်ရောက်မှုများနှင့် လုပ်ကိုင်သည့် နည်းလမ်းအားလုံးတွင် ဤကဲ့သို့သော မဖြစ်မနေထည့်ရန် မလိုအပ်သော ပါရာမီတာကို ပြင်ဆင်ထားပြီး၊ အန်နီမေးရှင်း ပြီးဆုံးပြီးနောက် လုပ်ဆောင်မည့် callback-ဖန်ရှင်ကို ကျွန်ုပ်တို့ လွှဲပြောင်းပေးနိုင်ပါသည်။ ကျွန်ုပ်တို့၏ အခြေအနေတွင် ကျွန်ုပ်တို့သည် callback-ဖန်ရှင်ကို hide နည်းလမ်းသို့ လွှဲပြောင်းပေးခဲ့ပြီး ထိုဖန်ရှင်၏ body တွင် ခလုတ်၏အမည်ကို ပြောင်းလဲခဲ့ပါသည်။

$('#hide').click(function() {
	$('#elem').hide(1000, function() {
		$('#hide').html('hidden');
	});
});