টগল পদ্ধতি
toggle পদ্ধতি উপাদানগুলির মসৃণ প্রদর্শন/লুকানো
পরিবর্তন করে। যদি একটি উপাদান প্রদর্শিত হয়, তবে তা লুকানো হবে
এবং বিপরীতভাবে।
বাক্য গঠন
মিলিসেকেন্ডে নির্দিষ্ট সময়ের জন্য প্রদর্শন,
ডিফল্টরূপে 400ms:
.toggle(সময়কাল);
সময় শুধুমাত্র মিলিসেকেন্ডেই নয়,
বরং কীওয়ার্ড slow (600ms)
এবং fast (200ms) দিয়েও নির্দিষ্ট করা যেতে পারে, মান যত বেশি,
অ্যানিমেশন তত ধীর:
.toggle('slow' বা 'fast');
display প্যারামিটার দিয়ে মান
true বা false পাঠানো যেতে পারে। যদি true হয়, তবে উপাদান
শুধুমাত্র প্রদর্শিত হবে, false - লুকানো হবে:
.toggle(display);
যদি কোন প্যারামিটার নির্দিষ্ট না করা হয় - অ্যানিমেশন কাজ করবে না, উপাদানগুলি তাত্ক্ষণিকভাবে প্রদর্শিত/লুকানো হবে:
.toggle();
দ্বিতীয় প্যারামিটার হিসাবে ইজিং ফাংশন পাঠানো যেতে পারে, এবং তৃতীয় প্যারামিটার হিসাবে কলব্যাক ফাংশন - অ্যানিমেশন সম্পন্ন হওয়ার পরে কাজ করবে। উভয় প্যারামিটারই ঐচ্ছিক:
.toggle(সময়কাল, [ইজিং ফাংশন], [কলব্যাক ফাংশন]);
শুধুমাত্র দ্বিতীয় ঐচ্ছিক প্যারামিটার হিসাবে কলব্যাক ফাংশন পাঠানো যেতে পারে - অ্যানিমেশন সম্পন্ন হওয়ার পরে কাজ করবে:
.toggle(সময়কাল, [কলব্যাক ফাংশন]);
পদ্ধতিতে বিভিন্ন অপশন পাঠানো যেতে পারে, জাভাস্ক্রিপ্ট অবজেক্ট আকারে, যাতে রয়েছে key: value জোড়া:
.toggle(options);
এই ধরনের একটি অবজেক্ট নিম্নলিখিত
প্যারামিটার এবং ফাংশন পাঠাতে পারে - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always। এই
প্যারামিটারগুলির বর্ণনা আপনি animate পদ্ধতির জন্য দেখতে পারেন। উদাহরণস্বরূপ,
সময়কাল এবং ইজিং ফাংশন সেট করা যাক:
.toggle( {duration: 800, easing: easeInSine} );
উদাহরণ
চলুন বাটন টিপার পরে, toggle পদ্ধতি ব্যবহার করে
লুকানো অনুচ্ছেদটি মসৃণভাবে প্রদর্শন করা যাক। কীওয়ার্ড
slow পাঠিয়ে, আমরা গতি
600ms এ সেট করব। পুনরায় টিপলে - লুকানো হবে:
<button>টেক্সট দেখান</button>
<p style="display: none">টেক্সট</p>
$('button').click(function() {
$('p').toggle('slow');
});
আরও দেখুন
-
fadeToggleপদ্ধতি,
যা উপাদানগুলির স্বচ্ছতা পরিবর্তন করে -
slideToggleপদ্ধতি,
যা উপাদানগুলির মসৃণ প্রদর্শন/লুকানো পরিবর্তন করে -
showপদ্ধতি,
যা উপাদানগুলিকে মসৃণভাবে প্রদর্শন করে -
hideপদ্ধতি,
যা উপাদানগুলিকে মসৃণভাবে লুকিয়ে দেয়
