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