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