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