জেকুয়েরি slideUp() মেথড
সংজ্ঞা এবং ব্যবহার
slideUp() মেথডটি নির্দিষ্ট এলিমেন্টকে উপরে স্লাইড(হাইড) করে।
নোটঃ হাইড হওয়া এলিমেন্ট প্রদর্শিত হবে না (এছাড়াও এটি পেজের লে-আউটে কোনো প্রভাব ফেলবে না)।
টিপসঃ একটি এলিমেন্টকে নিচে স্লাইড করার জন্য slideDown() মেথডটি ব্যবহার করুন।
সিনট্যাক্স
$(selector).slideUp(speed,easing,callback)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে slideUp() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
speed |
ঐচ্ছিক। স্লাইড ইফেক্টের স্পিড নির্ধারন করে। ডিফল্ট ভ্যালু হচ্ছে 400 মিলিসেকেন্ড। সম্ভাব্য ভ্যালুগুলো হলোঃ
|
easing |
ঐচ্ছিক। বিভিন্ন জায়গা থেকে কোন এলিমেন্টকে এনিমেশন করার স্পিডকে নির্ধারন করে। ডিফল্ট ভ্যালু হচ্ছে "swing"সম্ভাব্য ভ্যালুগুলো হলোঃ
|
callback |
ঐচ্ছিক।
slideUp() মেথডটি সম্পুর্ন হলে এই ফাংশনটি কাজ করবে।
কলব্যাক ফাংশন সম্পর্কে আরো জানতে আমাদের জেকুয়েরি কলব্যাক পেজে ভিজিট করুন। |
slideUp() মেথড সংক্রান্ত উদাহরণ
হাইড হওয়া <p> এলিমেন্টকে উপরে স্লাইড করিঃ
উদাহরণ
<!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();
});
$(".slidedownBtn").click(function(){
$("p").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>
ফলাফল
slideUp() মেথডে স্পিড প্যারামিটারের ব্যবহার
slideUp() মেথডে কিভাবে স্পিড প্যারামিটার ব্যবহার করা যায়, তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!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>
ফলাফল
slideUp() মেথডে কলব্যাক প্যারামিটারের ব্যবহার
নির্বাচিত এলিমেন্টকে স্লাইড আপ এবং স্লাইড ডাউন করার সময় কিভাবে কলব্যাক প্যারামিটার ব্যবহার করা যায়, তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!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>
ফলাফল