fadeOut ක්‍රමය
fadeOut ක්‍රමය මූලද්‍රව්‍ය
සිහින් වශයෙන් සඟවයි. මූලද්‍රව්‍ය පෙන්වීමට
fadeIn ක්‍රමය භාවිතා කළ හැකිය,
ඒවා පාරදෘෂ්‍ය නොවන ලෙස කරමින්.
වාක්‍ය රචනා ක්‍රමය
තිරසාර කාලයක් සඳහා පෙන්වන්න,
400ms පෙරනිමිය ලෙස:
.fadeOut(කාලය);
කාලය මිලිතත්පර වලින් පමණක් නොව,
slow (600ms)
සහ fast (200ms) යන මූල පද වලින් ද තීරණය කළ හැකිය, අගය වැඩි වන තරමට,
සජීවිකරණය ළමා වේ:
.fadeOut('slow' හෝ 'fast');
පරාමිතීන් නොදැක්වුවහොත් - සජීවිකරණය නොමැත, මූලද්‍රව්‍ය ක්ෂණිකව සඟවනු ලැබේ:
.fadeOut();
දෙවන පරාමිතියක් ලෙස සුමට ක්‍රියාකාරිත්වය ලබා දිය හැකිය, තුන්වන පරාමිතියක් ලෙස callback-ක්‍රියාකාරීත්වය - සජීවිකරණය සම්පූර්ණ වූ පසු ක්‍රියාත්මක වේ. පරාමිති දෙකම අනිවාර්ය නොවේ:
.fadeOut(කාලය, [සුමට ක්‍රියාකාරිත්වය], [callback-ක්‍රියාකාරීත්වය]);
ක්‍රමයට විවිධ විකල්ප, JavaScript වස්තුවක් ලෙස, අඩංගු යුගල යතුර: අගය:
.fadeOut(options);
එවැනි වස්තුවක් පහත සඳහන් පරාමිති
සහ ක්‍රියාකාරීත්වයන් සම්ප්‍රේෂණය කළ හැකිය - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. විස්තර
මෙම පරාමිති සඳහා ඔබට නැරඹිය හැකිය
animate ක්‍රමය සඳහා. උදාහරණයක් ලෙස,
කාල සීමාව සහ සුමට ක්‍රියාකාරීත්වය සකස් කරමු:
.fadeOut( {duration: 800, easing: easeInSine} );
උදාහරණය
පහත උදාහරණයේ බොත්තම ක්ලික් කළ විට
#hide මූලද්‍රව්‍ය #test සමඟ
fadeOut ක්‍රමය භාවිතයෙන් සඟවනු ලැබේ,
සහ බොත්තම #show සමඟ - පෙන්වනු ලැබේ,
fadeIn භාවිතයෙන්. අපි ද
වේගය 1000ms දක්වා සකස් කරමු:
<button id="hide">සඟවන්න</button>
<button id="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">සඟවන්න</button>
<button id="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('?');
});
});
