fadeIn ක්‍රමය
fadeIn ක්‍රමය සැඟවුණු
මූලද්‍රව්‍ය සුමටව පෙන්වන අතර ඒවා අපාරදර්ශී කරයි.
fadeOut ක්‍රමය භාවිතයෙන්
මූලද්‍රව්‍ය සැඟවිය හැකිය,
ඒවා පාරදර්ශී කිරීමෙන්.
වාක්‍ය රචනය
නියමිත කාලයක් තුළ පෙන්වීම,
පෙරනිමියෙන් 400ms:
.fadeIn(duration);
කාලය මිලිතතිරණ වලින් පමණක් නොව,
slow (600ms)
සහ fast (200ms) යන යතුරු වචන වලින් ද නියම කළ හැකිය.
වටිනාකම වැඩි වැඩියෙන්, ඇනිමේෂනය මන්දගාමී වේ:
.fadeIn('slow' or 'fast');
පරාමිතීන් නිශ්චිතව නොදක්වන්නේ නම් - ඇනිමේෂනය සිදු නොවේ, මූලද්‍රව්‍ය ක්ෂණිකව පෙන්වනු ලැබේ:
.fadeIn();
දෙවන පරාමිතිය ලෙස සුමට කාර්යය (easing function) සම්ප්‍රේෂණය කළ හැකිය, සහ තෙවන පරාමිතිය ලෙස callback කාර්යය - ඇනිමේෂනය සම්පූර්ණ වූ පසු ක්‍රියාත්මක වේ. පරාමිතීන් දෙකම අනිවාර්ය නොවේ:
.fadeIn(duration, [easing function], [callback function]);
ක්‍රමයට විවිධ විකල්ප, JavaScript වස්තුවක ආකාරයෙන්, අඩංගු key: value යුගල සම්ප්‍රේෂණය කළ හැකිය:
.fadeIn(options);
එවැනි වස්තුවක් පහත සඳහන්
පරාමිතීන් සහ කාර්යයන් සම්ප්‍රේෂණය කළ හැකිය - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. මෙම
පරාමිතීන් විස්තර
animate ක්‍රමය සඳහා ඔබට බැලිය හැකිය. උදාහරණයක් ලෙස,
කාල සීමාව සහ සුමට කාර්යය සකසමු:
.fadeIn( {duration: 800, easing: easeInSine} );
උදාහරණය
පහත උදාහරණයේ, බොත්තම මත ක්ලික් කිරීමේදී
#hide, #test මූලද්‍රව්‍යය
fadeOut ක්‍රමය භාවිතයෙන් සැඟවෙනු ඇත,
සහ බොත්තම #show - පෙන්වනු ලැබේ,
fadeIn ක්‍රමය භාවිතයෙන්. අපි ද
වේගය 1000ms ලෙස සකසමු:
<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000);
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000);
});
උදාහරණය
පහත උදාහරණයේ, ඇනිමේෂනය අවසන් වූ පසු
#test මූලද්‍රව්‍යය පෙන්වීමේදී අපි
පණිවිඩයක් ප්‍රදර්ශනය කරමු
'!' යන පෙළ සමඟ, සහ සැඟවීමේදී
'?' යන පෙළ සමඟ:
<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
