জেকুয়েরি hide() মেথড
সংজ্ঞা এবং ব্যবহার
hide() মেথডটি নির্দিষ্ট এলিমেন্টকে হাইড করে।
টিপসঃ এটি সিএসএস প্রোপার্টি display:none এর মতো একই।
নোটঃ হাইড হওয়া এলিমেন্টের কিছুই প্রদর্শিত হবে না (এবং পেজের লে-আউটে কোনো ইফেক্ট ফেলবে না)।
টিপসঃ হাইড হওয়া এলিমেন্টকে প্রদর্শন করতে, show() মেথড দেখুন।
সিনট্যাক্সঃ
$(selector).hide(speed,easing,callback)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে finish() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
speed |
ঐচ্ছিক। হাইড ইফেক্টের স্পিড নির্ধারন করে। ডিফল্ট ভ্যালু হচ্ছে 400 মিলিসেকেন্ড। সম্ভাব্য ভ্যালুগুলো হলোঃ
|
easing |
ঐচ্ছিক। বিভিন্ন জায়গা থেকে কোন এলিমেন্টকে এনিমেশন করার স্পিডকে নির্ধারন করে। ডিফল্ট ভ্যালু হচ্ছে "swing"সম্ভাব্য ভ্যালুগুলো হলোঃ
|
callback |
ঐচ্ছিক। hide() মেথডটি সম্পুর্ন হলে এই ফাংশনটি কাজ করবে।
কলব্যাক ফাংশন সম্পর্কে আরো জানতে আমাদের জেকুয়েরি কলব্যাক পেজে ভিজিট করুন। |
hide() মেথড সংক্রান্ত উদাহরণ
নিচের উদাহরনে কিভাবে এলিমেন্ট হাইড করা যায় তা দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".hideBtn").click(function(){
$("p").hide();
});
$(".showBtn").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<h3>hide() মেথডের মাধ্যমে এলিমেন্টকে হাইড করা হয়।</h3>
<p>এটি একটি প্যারাগ্রাফ।</p>
<button class="hideBtn">Hide</button>
<button class="showBtn">Show</button>
</body>
</html>
ফলাফল
hide() মেথডে স্পিড প্যারামিটারের ব্যবহার
একটি এলিমেন্ট হাইড করা/ প্রদর্শন করার সময় কিভাবে স্পিড প্যারামিটারের কিভাবে ব্যবহার করা যায়, তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".hideBtn").click(function(){
$("p").hide(2000);
});
$(".showBtn").click(function(){
$("p").show(3000);
});
});
</script>
</head>
<body>
<h3>hide() মেথডের মাধ্যমে এলিমেন্টকে হাইড করা হয়।</h3>
<p style="height:80px; background-color: teal;color: white;">এটি একটি প্যারাগ্রাফ।</p>
<button class="hideBtn">Hide</button>
<button class="showBtn">Show</button>
</body>
</html>
ফলাফল
hide() মেথডে কলব্যাক প্যারামিটারের ব্যবহার
একটি এলিমেন্ট হাইড করা/ প্রদর্শন করার সময় কিভাবে কলব্যাক প্যারামিটার ব্যবহার করা যায়, তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".hideBtn").click(function(){
$("p").hide(2000, function(){
alert("hide() মেথড সম্পন্ন হয়েছে!");
});
});
$(".showBtn").click(function(){
$("p").show(3000, function(){
alert("show() মেথড সম্পন্ন হয়েছে!");
});
});
});
</script>
</head>
<body>
<h3>hide() মেথডের মাধ্যমে এলিমেন্টকে হাইড করা হয়।</h3>
<p style="height:80px; background-color: teal;color: white;">এটি একটি প্যারাগ্রাফ।</p>
<button class="hideBtn">Hide</button>
<button class="showBtn">Show</button>
</body>
</html>
ফলাফল