fadeToggle পদ্ধতি

fadeToggle পদ্ধতিটি পালাক্রমে উপাদানগুলিকে মসৃণভাবে দেখায় বা লুকিয়ে দেয়, তাদের স্বচ্ছতা অ্যানিমেট করে।

বাক্য গঠন

নির্দিষ্ট সময়ের জন্য প্রদর্শন/লুকানো, ডিফল্টরূপে 400ms:

.fadeToggle(সময়কাল);

সময় শুধুমাত্র মিলিসেকেন্ডেই নয়, বরং কীওয়ার্ড slow (600ms) এবং fast (200ms) দিয়েও নির্দিষ্ট করা যেতে পারে, মান যত বেশি, অ্যানিমেশন তত ধীর:

.fadeToggle('slow' বা 'fast');

যদি কোনো প্যারামিটার নির্দিষ্ট না করা হয় - কোনো অ্যানিমেশন হবে না, উপাদানগুলি তাৎক্ষণিকভাবে দেখানো/লুকানো হবে:

.fadeToggle();

দ্বিতীয় প্যারামিটার হিসাবে ইজিং ফাংশন পাস করা যেতে পারে, এবং তৃতীয় প্যারামিটার হিসাবে কলব্যাক ফাংশন - অ্যানিমেশন সম্পন্ন হওয়ার পরে কাজ করবে। উভয় প্যারামিটারই ঐচ্ছিক:

.fadeToggle(সময়কাল, [ইজিং ফাংশন], [কলব্যাক ফাংশন]);

পদ্ধতিতে বিভিন্ন বিকল্প পাস করা যেতে পারে, জাভাস্ক্রিপ্ট অবজেক্ট আকারে, যাতে কী: মান জোড়া থাকে:

.fadeToggle(বিকল্পসমূহ);

এই ধরনের একটি অবজেক্ট নিম্নলিখিত প্যারামিটার এবং ফাংশনগুলি পাস করতে পারে - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always। এই প্যারামিটারগুলির বর্ণনা আপনি animate পদ্ধতির জন্য দেখতে পারেন। উদাহরণস্বরূপ, সময়কাল এবং ইজিং ফাংশন সেট করা যাক:

.fadeToggle( {duration: 800, easing: easeInSine} );

উদাহরণ

নিম্নলিখিত উদাহরণে, #toggle বাটনে প্রথম ক্লিক করলে #test উপাদানটি লুকিয়ে যাবে, এবং পুনরায় ক্লিক করলে - দেখানো হবে। এই জন্য আমরা fadeToggle পদ্ধতি ব্যবহার করি। এছাড়াও আমরা গতি 1000ms এ সেট করব এবং ইজিং ফাংশনের মান linear এ সেট করব:

<button id="toggle">টগল করুন</button>
<div id="test"></div>

#test {
	width: 200px;
	height: 200px;
	background: green;
	color: white;
	margin-top: 10px;
}

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

আরও দেখুন

slideToggle পদ্ধতি,
যা উপাদানগুলির মসৃণ প্রদর্শন/লুকানো পরিবর্তন করে
fadeTo পদ্ধতি,
যা উপাদানগুলির স্বচ্ছতা পরিবর্তন করে
toggle পদ্ধতি,
যা উপাদানগুলির মসৃণ প্রদর্শন/লুকানো পরিবর্তন করে
animate পদ্ধতি,
যা উপাদানগুলির বৈশিষ্ট্য অ্যানিমেট করে