fadeIn ක්‍රමය

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

වාක්‍ය රචනය

නියමිත කාලයක් තුළ පෙන්වීම, පෙරනිමියෙන් 400ms:

javascript.fadeIn(duration);

කාලය මිලිතතිරණ වලින් පමණක් නොව, slow (600ms) සහ fast (200ms) යන යතුරු වචන වලින් ද නියම කළ හැකිය. වටිනාකම වැඩි වැඩියෙන්, ඇනිමේෂනය මන්දගාමී වේ:

javascript.fadeIn('slow' or 'fast');

පරාමිතීන් නිශ්චිතව නොදක්වන්නේ නම් - ඇනිමේෂනය සිදු නොවේ, මූලද්‍රව්‍ය ක්ෂණිකව පෙන්වනු ලැබේ:

javascript.fadeIn();

දෙවන පරාමිතිය ලෙස සුමට කාර්යය (easing function) සම්ප්‍රේෂණය කළ හැකිය, සහ තෙවන පරාමිතිය ලෙස callback කාර්යය - ඇනිමේෂනය සම්පූර්ණ වූ පසු ක්‍රියාත්මක වේ. පරාමිතීන් දෙකම අනිවාර්ය නොවේ:

javascript.fadeIn(duration, [easing function], [callback function]);

ක්‍රමයට විවිධ විකල්ප, JavaScript වස්තුවක ආකාරයෙන්, අඩංගු key: value යුගල සම්ප්‍රේෂණය කළ හැකිය:

javascript.fadeIn(options);

එවැනි වස්තුවක් පහත සඳහන් පරාමිතීන් සහ කාර්යයන් සම්ප්‍රේෂණය කළ හැකිය - 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('?');
  });
});

මෙයද බලන්න