slideToggle विधि
slideToggle विधि छिपे हुए तत्वों को
कोमलता से दिखाती है और दिखाए गए तत्वों को छिपाती है।
वाक्य - विन्यास
निर्दिष्ट समय के लिए प्रदर्शन/छिपाना,
डिफ़ॉल्ट रूप से 400ms:
.slideToggle(अवधि);
समय न केवल मिलीसेकंड में, बल्कि कीवर्ड slow (600ms)
और fast (200ms) से भी निर्धारित किया जा सकता है, मान जितना अधिक होगा,
एनीमेशन उतना ही धीमा होगा:
.slideToggle('slow' या 'fast');
यदि कोई पैरामीटर निर्दिष्ट नहीं किया जाता है - कोई एनीमेशन नहीं होगा, तत्व तत्काल दिखाए/छिपाए जाएंगे:
.slideToggle();
दूसरे पैरामीटर के रूप में ईज़िंग फ़ंक्शन भी पास किया जा सकता है, और तीसरे पैरामीटर के रूप में कॉलबैक फ़ंक्शन - एनीमेशन पूरा होने के बाद कार्य करेगा। दोनों पैरामीटर वैकल्पिक हैं:
.slideToggle(अवधि, [ईज़िंग फ़ंक्शन], [कॉलबैक फ़ंक्शन]);
विधि को विभिन्न विकल्प पास किए जा सकते हैं, जावास्क्रिप्ट ऑब्जेक्ट के रूप में, जिसमें कुंजी: मान जोड़े होते हैं:
.slideToggle(विकल्प);
ऐसा ऑब्जेक्ट निम्नलिखित पैरामीटर और फ़ंक्शन
पास कर सकता है - 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');
});
