jQuery এর ফেডিং ইফেক্টস ওয়েব পেজের এলিমেন্টগুলিতে সুন্দর ভিজ্যুয়াল ট্রানজিশন যোগ করতে ব্যবহার করা হয়। fadeIn(), fadeOut(), এবং fadeToggle() ফাংশনগুলি এলিমেন্টগুলিকে ধীরে ধীরে দৃশ্যমান বা অদৃশ্য করে, যা একটি নরম এবং পেশাদার ইউজার ইন্টারফেস তৈরি করে।
fadeIn()
fadeIn() ফাংশন কোনো এলিমেন্টকে ধীরে ধীরে দৃশ্যমান করে তোলে। এটি ব্যবহার করে এলিমেন্টের display প্রোপার্টি none থেকে block বা অন্য যে কোনো স্টেটাসে পরিবর্তন করা হয়।
সিনট্যাক্স:
$(selector).fadeIn(duration, callback);
- duration (ঐচ্ছিক): ফেড ইন করার সময় লাগে যত মিলিসেকেন্ড (ডিফল্ট 400 মিলিসেকেন্ড)।
- callback (ঐচ্ছিক): ফেড ইন শেষ হওয়ার পরে কল করা ফাংশন।
উদাহরণ:
<p id="hiddenText" style="display: none;">আমি দৃশ্যমান হবো!</p>
<button>দেখাও</button>
<script>
$("button").click(function() {
$("#hiddenText").fadeIn(1000);
});
</script>
fadeOut()
fadeOut() ফাংশন একটি এলিমেন্টকে ধীরে ধীরে অদৃশ্য করে দেয়, যা display প্রোপার্টির মান none করে দেয়।
সিনট্যাক্স:
$(selector).fadeOut(duration, callback);
- duration (ঐচ্ছিক): ফেড আউট করার সময় লাগে যত মিলিসেকেন্ড।
- callback (ঐচ্ছিক): ফেড আউট শেষ হওয়ার পরে কল করা ফাংশন।
উদাহরণ:
<p id="visibleText">আমি অদৃশ্য হবো!</p>
<button>লুকাও</button>
<script>
$("button").click(function() {
$("#visibleText").fadeOut(1000);
});
</script>
fadeToggle()
fadeToggle() ফাংশন fadeIn() এবং fadeOut() এর কাজগুলি বিপরীতভাবে করে, যাতে করে একটি এলিমেন্ট যদি দৃশ্যমান হয়, তাহলে এটি অদৃশ্য হবে এবং যদি অদৃশ্য হয়, তাহলে দৃশ্যমান হবে।
সিনট্যাক্স:
$(selector).fadeToggle(duration, callback);
- duration (ঐচ্ছিক): ফেড টগল করার সময় লাগে যত মিলিসেকেন্ড।
- callback (ঐচ্ছিক): ফেড টগল শেষ হওয়ার পরে কল করা ফাংশন।
উদাহরণ:
<p id="toggleText">আমি টগল হবো!</p>
<button>টগল</button>
<script>
$("button").click(function() {
$("#toggleText").fadeToggle(1000);
});
</script>
সারাংশ
jQuery-র ফেডিং ইফেক্টস ওয়েব পেজগুলিতে ভিজ্যুয়াল অ্যাপিল বাড়ায়। এগুলি ব্যবহার করে কন্টেন্টের দৃশ্যমানতা নিয়ন্ত্রণ করা যায়, যা ব্যবহারকারীদের অভিজ্ঞতাকে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ করে তোলে।
Read more
