मेथड fadeToggle

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

सिंटैक्स

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

.fadeToggle(अवधि);

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

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

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

.fadeToggle();

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

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

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

.fadeToggle(विकल्प);

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

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

उदाहरण

निम्नलिखित उदाहरण में, बटन #toggle पर पहली बार क्लिक करने पर तत्व #test छिप जाएगा, और दोबारा क्लिक करने पर - दिखाई देगा। इसके लिए हम मेथड fadeToggle का उपयोग करते हैं। साथ ही हम गति 1000ms पर सेट करेंगे और ईज़िंग फ़ंक्शन का मान linear पर:

<button id="toggle">टॉगल</button>
<div id="test"></div>

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

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

यह भी देखें

मेथड slideToggle,
जो तत्वों को धीरे-धीरे दिखाने/छिपाने को बारी-बारी से करता है
मेथड fadeTo,
जो तत्वों की पारदर्शिता बदलता है
मेथड toggle,
जो तत्वों को धीरे-धीरे दिखाने/छिपाने को बारी-बारी से करता है
मेथड animate,
जो तत्वों के गुणों को एनिमेट करता है