fadeOut मेथड

fadeOut मेथड तत्वों को कोमलता से छुपाता है। तत्वों को दिखाने के लिए fadeIn मेथड का उपयोग किया जा सकता है, उन्हें अपारदर्शी बनाकर।

सिंटैक्स

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

.fadeOut(अवधि);

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

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

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

.fadeOut();

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

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

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

.fadeOut(विकल्प);

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

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

उदाहरण

निम्नलिखित उदाहरण में बटन #hide पर क्लिक करने पर #test वाला तत्व fadeOut मेथड की सहायता से छिप जाएगा, और बटन #show पर - दिखाई देगा, fadeIn की सहायता से। हम गति 1000ms पर सेट करेंगे:

<button id="hide">छुपाएं</button>
<button id="show">दिखाएं</button>
<div id="test"></div>

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

$('#show').on('click', function() {
	$('#test').fadeIn(1000);
});

$('#hide').on('click', function() {
	$('#test').fadeOut(1000);
});

उदाहरण

और निम्नलिखित उदाहरण में एनीमेशन समाप्त होने के बाद तत्व #test को दिखाते समय हम '!' टेक्स्ट वाला संदेश दिखाएंगे, और छुपाते समय '?' टेक्स्ट वाला संदेश:

<button id="hide">छुपाएं</button>
<button id="show">दिखाएं</button>
<div id="test"></div>

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

$('#show').on('click', function() {
	$('#test').fadeIn(1000, function() {
		alert('!');
	});
});

$('#hide').on('click', function() {
	$('#test').fadeOut(1000, function() {
		alert('?');
	});
});

यह भी देखें

fadeIn मेथड,
जो छुपे हुए तत्वों को कोमलता से दिखाता है, उन्हें अपारदर्शी बनाकर
hide मेथड,
जो तत्वों को कोमलता से छुपाता है
slideUp मेथड,
जो तत्वों को कोमलता से छुपाता है