fadeIn मेथड

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

सिंटैक्स

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

javascript.fadeIn(अवधि);

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

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

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

javascript.fadeIn();

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

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

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

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

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

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

उदाहरण

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

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

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

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

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

उदाहरण

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

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

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

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

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

यह भी देखें