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-ফাংশন পাস করতে পারি, যা অ্যানিমেশন শেষ হওয়ার পরে কার্যকর হবে। আমাদের ক্ষেত্রে, আমরা hide পদ্ধতিতে একটি callback-ফাংশন পাস করেছি, এবং ইতিমধ্যেই এই ফাংশনের 본রে গিয়ে বাটনের নাম পরিবর্তন করেছি:

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