fadeOut ක්‍රමය

fadeOut ක්‍රමය මූලද්‍රව්‍ය සිහින් වශයෙන් සඟවයි. මූලද්‍රව්‍ය පෙන්වීමට fadeIn ක්‍රමය භාවිතා කළ හැකිය, ඒවා පාරදෘෂ්‍ය නොවන ලෙස කරමින්.

වාක්‍ය රචනා ක්‍රමය

තිරසාර කාලයක් සඳහා පෙන්වන්න, 400ms පෙරනිමිය ලෙස:

javascript.fadeOut(කාලය);

කාලය මිලිතත්පර වලින් පමණක් නොව, slow (600ms) සහ fast (200ms) යන මූල පද වලින් ද තීරණය කළ හැකිය, අගය වැඩි වන තරමට, සජීවිකරණය ළමා වේ:

javascript.fadeOut('slow' හෝ 'fast');

පරාමිතීන් නොදැක්වුවහොත් - සජීවිකරණය නොමැත, මූලද්‍රව්‍ය ක්ෂණිකව සඟවනු ලැබේ:

javascript.fadeOut();

දෙවන පරාමිතියක් ලෙස සුමට ක්‍රියාකාරිත්වය ලබා දිය හැකිය, තුන්වන පරාමිතියක් ලෙස callback-ක්‍රියාකාරීත්වය - සජීවිකරණය සම්පූර්ණ වූ පසු ක්‍රියාත්මක වේ. පරාමිති දෙකම අනිවාර්ය නොවේ:

javascript.fadeOut(කාලය, [සුමට ක්‍රියාකාරිත්වය], [callback-ක්‍රියාකාරීත්වය]);

ක්‍රමයට විවිධ විකල්ප, JavaScript වස්තුවක් ලෙස, අඩංගු යුගල යතුර: අගය:

javascript.fadeOut(options);

එවැනි වස්තුවක් පහත සඳහන් පරාමිති සහ ක්‍රියාකාරීත්වයන් සම්ප්‍රේෂණය කළ හැකිය - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. විස්තර මෙම පරාමිති සඳහා ඔබට නැරඹිය හැකිය animate ක්‍රමය සඳහා. උදාහරණයක් ලෙස, කාල සීමාව සහ සුමට ක්‍රියාකාරීත්වය සකස් කරමු:

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

උදාහරණය

පහත උදාහරණයේ බොත්තම ක්ලික් කළ විට #hide මූලද්‍රව්‍ය #test සමඟ fadeOut ක්‍රමය භාවිතයෙන් සඟවනු ලැබේ, සහ බොත්තම #show සමඟ - පෙන්වනු ලැබේ, fadeIn භාවිතයෙන්. අපි ද වේගය 1000ms දක්වා සකස් කරමු:

html<button id="hide">සඟවන්න</button>
<button id="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">සඟවන්න</button>
<button id="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('?');
  });
});

මෙයද බලන්න