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