मेथड fadeToggle

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

सिंटैक्स

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

javascript.fadeToggle(अवधि);

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

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

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

javascript.fadeToggle();

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

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

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

javascript.fadeToggle(विकल्प);

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

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

उदाहरण

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

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

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

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

यह भी देखें