জেকুয়েরি ইফেক্ট show() মেথড
সংজ্ঞা এবং ব্যবহার
show() মেথড নির্দিষ্ট হিডেন এলিমেন্টকে সো করে।
নোটঃ show() মেথডের মাধ্যমে জেকুয়েরির কোন মেথড দ্বারা হাইড করা এলিমেন্ট এবং সিএসএসের display:none প্রোপার্টি দ্বারা হাইড করা এলিমেন্টকে প্রদর্শন করে। কিন্তু visibility:hidden প্রোপার্টির বেলায় কাজ করবে না।
টিপস: এলিমেন্ট হাইড করার জন্য hide() মেথড ব্যবহার করুন।
সিনট্যাক্সঃ
$(selector).show(speed,easing,callback)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে show() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
speed |
ঐচ্ছিক। সো ইফেক্টের স্পিড নির্ধারন করে। ডিফল্ট ভ্যালু হচ্ছে 400 মিলিসেকেন্ড।
সম্ভাব্য ভ্যালুগুলো হলো:
|
easing |
ঐচ্ছিক। বিভিন্ন জায়গা থেকে কোন এলিমেন্টকে এনিমেশন করার স্পিডকে নির্ধারন করে। ডিফল্ট ভ্যালু হচ্ছে "swing"সম্ভাব্য ভ্যালুগুলো হলো:
|
callback |
ঐচ্ছিক। show() মেথডটি সম্পুর্ন হলে এই ফাংশনটি কাজ করবে।
কলব্যাক ফাংশন সম্পর্কে আরো জানতে আমাদের জেকুয়েরি কলব্যাক পেজে ভিজিট করুন। |
show() মেথড সংক্রান্ত উদাহরণ
হাইড হওয়া এলিমেন্টকে প্রদর্শন করার উদাহরণঃ
উদাহরণ
<!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>
ফলাফল
show() মেথডে স্পিড প্যারামিটারের ব্যবহার
একটি এলিমেন্ট হাইড করা/ প্রদর্শন করার সময় কিভাবে স্পিড প্যারামিটারের কিভাবে ব্যবহার করা যায়, তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!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>
ফলাফল
show() মেথডে কলব্যাক প্যারামিটারের ব্যবহার
একটি এলিমেন্ট হাইড করা/ প্রদর্শন করার সময় কিভাবে কলব্যাক প্যারামিটার ব্যবহার করা যায়, তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!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>
ফলাফল