slideDown विधि

slideDown विधि छिपे हुए तत्वों को ऊपर से नीचे की ओर रोल करके धीरे-धीरे दिखाती है। तत्वों को slideUp विधि की मदद से छिपाया जा सकता है।

वाक्य-विन्यास

निर्धारित समय में दिखाना, डिफ़ॉल्ट रूप से 400ms:

.slideDown(अवधि);

समय न केवल मिलीसेकंड में, बल्कि कीवर्ड slow (600ms) और fast (200ms) से भी निर्धारित किया जा सकता है, मान जितना अधिक होगा, एनीमेशन उतना ही धीमा होगा:

.slideDown('slow' या 'fast');

यदि कोई पैरामीटर निर्दिष्ट नहीं किया जाता - तो कोई एनीमेशन नहीं होगा, तत्व तुरंत दिखाई देंगे:

.slideDown();

दूसरे पैरामीटर के रूप में ईज़िंग फ़ंक्शन भी पास किया जा सकता है, और तीसरे पैरामीटर के रूप में कॉलबैक फ़ंक्शन - जो एनीमेशन पूरा होने के बाद कार्यान्वित होगा। दोनों पैरामीटर वैकल्पिक हैं:

.slideDown(अवधि, [ईज़िंग फ़ंक्शन], [कॉलबैक फ़ंक्शन]);

विधि को विभिन्न विकल्प पास किए जा सकते हैं, जावास्क्रिप्ट ऑब्जेक्ट के रूप में, जिसमें कुंजी: मान जोड़े होते हैं:

.slideDown(विकल्प);

ऐसा ऑब्जेक्ट निम्नलिखित पैरामीटर और फ़ंक्शन पास कर सकता है - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always। इन पैरामीटर्स का विवरण आप animate विधि के लिए देख सकते हैं। उदाहरण के लिए, अवधि और ईज़िंग फ़ंक्शन सेट करते हैं:

.slideDown( {duration: 600, easing: easeInSine} );

उदाहरण

आइए बटन दबाने के बाद, slideDown विधि की मदद से छिपे हुए पैराग्राफ को धीरे-धीरे दिखाएं। कीवर्ड slow पास करके, हम गति 600ms पर सेट करेंगे। एनीमेशन समाप्त होने के बाद कंसोल में 'Animation complete' आउटपुट करेंगे:

<button>टेक्स्ट दिखाएं</button>
<p style="display: none">टेक्स्ट</p>

$('button').click(function() {
	$('p').slideDown('slow', function() {
		console.log('Animation complete')
	});
});

यह भी देखें

slideUp विधि,
जो तत्वों को धीरे-धीरे छिपाती है
slideToggle विधि,
जो तत्वों को धीरे-धीरे दिखाने/छिपाने को बारी-बारी से करती है
fadeIn विधि,
जो छिपे हुए तत्वों को धीरे-धीरे दिखाती है, उन्हें अपारदर्शी बनाकर
show विधि,
जो तत्वों को धीरे-धीरे दिखाती है