জেকুয়েরি slideDown() মেথড
সংজ্ঞা এবং ব্যবহার
slideDown() মেথডটি কোন একটি নির্দিষ্ট এলিমেন্টকে নিচে স্লাইড(সো) করে।
নোটঃ slideDown() মেথডের মাধ্যমে জেকুয়েরির কোন মেথড দ্বারা হাইড করা এলিমেন্ট এবং সিএসএসের display:none প্রোপার্টি দ্বারা হাইড করা এলিমেন্টকে প্রদর্শন করা যায়। কিন্তু visibility:hidden প্রোপার্টির বেলায় এই মেথডটি কাজ করবে না।
টিপসঃ কোন এলিমেন্টকে উপরে স্লাইড করার জন্য slideUp() মেথড ব্যবহার করুন।
সিনট্যাক্স
$(selector).slideDown(speed,easing,callback)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে slideDown() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
speed |
ঐচ্ছিক। স্লাইড ইফেক্টের স্পিড নির্ধারন করে। ডিফল্ট ভ্যালু হচ্ছে 400 মিলিসেকেন্ড।সম্ভাব্য ভ্যালুগুলো হলোঃ
|
easing |
ঐচ্ছিক। বিভিন্ন জায়গা থেকে কোন এলিমেন্টকে এনিমেশন করার স্পিডকে নির্ধারন করে। ডিফল্ট ভ্যালুগুলো হলো "swing"সম্ভাব্য ভ্যালুগুলো হলোঃ
|
callback |
ঐচ্ছিক। slideDown() মেথডটি সম্পুর্ন হলে এই ফাংশনটি কাজ করবে।
কলব্যাক ফাংশন সম্পর্কে আরো জানতে আমাদের জেকুয়েরি কলব্যাক পেজে ভিজিট করুন। |
slideDown() মেথড সংক্রান্ত উদাহরণ
slideDown() মেথডে স্পিড প্যারামিটারের ব্যবহার
slideDown() মেথডে কিভাবে স্পিড প্যারামিটার ব্যবহার করা যায়, তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!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(){
$(".slideupBtn").click(function(){
$("p").slideUp(2000);
});
$(".slidedownBtn").click(function(){
$("p").slideDown(3000);
});
});
</script>
</head>
<body>
<p style="height:80px; background-color: teal;color: white;">এটি একটি প্যারাগ্রাফ।</p>
<button class="slideupBtn">Slide Up</button>
<button class="slidedownBtn">Slide Down</button>
</body>
</html>
ফলাফল
slideDown() মেথডে কলব্যাক প্যারামিটারের ব্যবহার
নির্বাচিত এলিমেন্টকে স্লাইড আপ এবং স্লাইড ডাউন করার সময় কিভাবে কলব্যাক প্যারামিটার ব্যবহার করা যায়, তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!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(){
$(".slideupBtn").click(function(){
$("p").slideUp(2000, function(){
alert("slideUp() মেথড সম্পন্ন হয়েছে!");
});
});
$(".slidedownBtn").click(function(){
$("p").slideDown(3000, function(){
alert("slideDown() মেথড সম্পন্ন হয়েছে!");
});
});
});
</script>
</head>
<body>
<p style="height:80px; background-color: teal;color: white;">এটি একটি প্যারাগ্রাফ।</p>
<button class="slideupBtn">Slide Up</button>
<button class="slidedownBtn">Slide Down</button>
</body>
</html>
ফলাফল