জেকুয়েরি fadeToggle() মেথড
সংজ্ঞা এবং ব্যবহার
fadeToggle() মেথডটি fadeIn() এবং fadeOut() মেথডের মধ্যে টোগল করে।
যদি এলিমেন্টটি ফেইড-আউট থাকে, fadeToggle() তাকে ফেইড-ইন করে।
যদি এলিমেন্টটি ফেইড-ইন থাকে, fadeToggle() তাকে ফেইড-আউট করে।
সিনট্যাক্সঃ
$(selector).fadeToggle(speed,easing,callback)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে fadeToggle() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
speed |
ঐচ্ছিক। ফেডিং ইফেক্টের স্পিড নির্ধারন করে। ডিফল্ট ভ্যালু হচ্ছে 400 মিলিসেকেন্ড।
সম্ভাব্য ভ্যালুগুলো হলোঃ
|
easing |
ঐচ্ছিক। বিভিন্ন জায়গা থেকে কোন এলিমেন্টকে এনিমেশন্ন করার স্পিডকে নির্ধারন করে। ডিফল্ট ভ্যালু হচ্ছে "swing"
সম্ভাব্য ভ্যালুগুলো হলোঃ
|
callback |
ঐচ্ছিক। fadeToggle() মেথডটি সম্পুর্ন হলে এই ফাংশনটি কাজ করবে।
কলব্যাক ফাংশন সম্পর্কে আরো জানতে আমাদের জেকুয়েরি কলব্যাক পেজে ভিজিট করুন। |
fadeToggle() মেথড সংক্রান্ত উদাহরণ
বিভিন্ন বক্সে ফেইড-ইন এবং ফেইড-আউট ইফেক্টের মধ্যে টোগলঃ
উদাহরণ
<!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(){
$("#firstDiv").fadeToggle();
$("#secondDiv").fadeToggle("slow");
$("#thirdDiv").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>বিভিন্ন স্পিড প্যারামিটারসহ fadeToggle() মেথড দেখানো হলো।</p>
<button>বক্সগুলোকে ফেইড-ইন/আউট করার জন্য ক্লিক করুন</button><br><br>
<div id="firstDiv" style="width:80px;height:80px;background-color:yellowgreen;"></div><br>
<div id="secondDiv" style="width:80px;height:80px;background-color:teal;"></div><br>
<div id="thirdDiv" style="width:80px;height:80px;background-color:deeppink;"></div>
</body>
</html>
ফলাফল
fadeToggle() মেথডে speed প্যারামিটারের ব্যবহার
ফেডিং ইফেক্টের স্পিড নির্ধারণ করার জন্য কিভাবে speed প্যারামিটার ব্যবহার করা হয় তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!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(){
$("#fadeToggleBtn1").click(function(){
$("#paragraph1").fadeToggle(3000)
});
$("#fadeToggleBtn2").click(function(){
$("#paragraph2").fadeToggle("slow", "linear");
});
$("#fadeToggleBtn3").click(function(){
$("#paragraph3").fadeToggle("fast");
});
});
</script>
</head>
<body>
<button id="fadeToggleBtn1">fadeToggle() মিলিসেকেন্ড</button>
<button id="fadeToggleBtn2">fadeToggle() slow</button>
<button id="fadeToggleBtn3">fadeToggle() fast</button>
<p id="paragraph1">এই প্যারাগ্রাফটি ফেই-ইন এবং আউটে 2500 মিলিসেকেন্ড সময় নিবে।</p>
<p id="paragraph2">এই প্যারাগ্রাফটিতে ধীরগতিতে ফেইড-ইন এবং ফেইড-আউট ইফেক্ট সম্পন্ন হবে।</p>
<p id="paragraph3">এই প্যারাগ্রাফটিতে দ্রুত ফেইড-ইন এবং ফেইড-আউট ইফেক্ট সম্পন্ন হবে।</p>
</body>
</html>
ফলাফল
fadeToggle() মেথডে কলব্যাক প্যারামিটারের ব্যবহার
fadeToggle() মেথড সম্পন্ন হওয়ার পর কিভাবে কলব্যাক প্যারামিটার ব্যবহার করা হয় তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!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(){
$("#div").fadeToggle(2000, function(){
alert("fadeToggle() মেথড সম্পন্ন হয়েছে!");
});
});
});
</script>
</head>
<body>
<button>fadeToggle() করতে ক্লিক করুন</button><br>
<div id="div" style="width:80px;height:80px;background-color:teal;"></div>
</body>
</html>
ফলাফল