jQuery-তে hide এবং show পদ্ধতি

ইফেক্টগুলি একটি উপাদানকে অ্যানিমেট করতে দেয়, উদাহরণস্বরূপ - এটিকে মসৃণভাবে লুকানো বা দেখানো। প্রতিটি ইফেক্টের জন্য jQuery-এর নিজস্ব পদ্ধতি রয়েছে। আসুন আমরা hide এবং show পদ্ধতি দিয়ে শুরু করি। hide এবং show পদ্ধতিগুলি উপাদানগুলি লুকানো এবং দেখাতে দেয়। তাদের কাজকর্ম দেখে নেওয়া যাক।

শুরুতে নিচের HTML কোডটি নেওয়া যাক:

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

CSS কোডটি এইরকম দেখাচ্ছে:

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

এখন Javascript কোড লিখি, যাতে #hide বাটনে ক্লিক করলে উপাদানটি লুকিয়ে যাবে, এবং #show-এ ক্লিক করলে - এটি দেখাবে:

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

$('#show').click(function() {
	$('#elem').show();
});

মিলিসেকেন্ডে ইফেক্ট সম্পাদনের সময় নির্দিষ্ট করা যেতে পারে (1000 মিলিসেকেন্ড = 1 সেকেন্ড)। এই ক্ষেত্রে, ইফেক্টটি নির্দিষ্ট সময়ের মধ্যে মসৃণভাবে চলতে থাকবে। আসুন ইফেক্ট সম্পাদনের সময় 1 সেকেন্ড নির্ধারণ করি এবং দেখি কিভাবে ইফেক্ট পরিবর্তিত হয়:

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

$('#show').click(function() {
	$('#elem').show(1000);
});

নিম্নলিখিত মার্কআপ দেওয়া আছে:

<p>
	<a id="hide" href="">hide</a> <a id="show" href="">show</a>
</p>
<div id="block">
	<ol>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
	</ol>
</div>

body {
	font-size: 18px;
}
a {
	color: blue;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
ol {
	margin: 0px;
	padding-left: 10px;
}
li {
	list-style-type: inside;
}
div {
	display: inline-block;
	padding: 30px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

এটি এমনভাবে তৈরি করুন যাতে #hide সহ লিঙ্কে ক্লিক করলে তালিকা ধারণকারী divটি লুকিয়ে যায়, এবং #show সহ লিঙ্কে ক্লিক করলে এটি দেখায়। প্রতিটি ইফেক্টের জন্য সম্পাদনের সময় 600ms-এ সেট করুন।