fadeIn मेथड

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

सिंटैक्स

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

.fadeIn(अवधि);

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

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

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

.fadeIn();

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

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

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

.fadeIn(विकल्प);

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

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

उदाहरण

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

<button id="hide">hide</button>
<button id="show">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">hide</button>
<button id="show">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('?');
	});
});

यह भी देखें

fadeOut मेथड,
जो तत्वों को धीरे-धीरे छिपाता है, उन्हें पारदर्शी बनाकर
show मेथड,
जो तत्वों को धीरे-धीरे दिखाता है
slideDown मेथड,
जो तत्वों को धीरे-धीरे दिखाता है