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