slideToggle ක්රමය
slideToggle ක්රමය සඟවා ඇති අංග
මෘදුවෙන් පෙන්වන අතර පෙන්වා ඇති අංග සඟවයි.
වාක්ය රචනා විලාසය
නියමිත කාලයක් තුළ පෙන්වීම/සඟවා ගැනීම,
පෙරනිමි අගය වන්නේ 400ms:
.slideToggle(කාලසීමාව);
කාලය මිලිතපැයින් පමණක් නොව,
slow (600ms)
සහ fast (200ms) යන යතුරු වචන වලින් ද දැක්විය හැකිය,
අගය විශාල වන තරමට,
සජීවනය මන්දගාමී වේ:
.slideToggle('slow' හෝ 'fast');
පරාමිතීන් නිශ්චිතව නොදක්වන්නේ නම් - සජීවනයක් නොමැත, අංග ක්ෂණිකව දර්ශනය වේ/අතුරුදහන් වේ:
.slideToggle();
දෙවන පරාමිතියක් ලෙස සුමට ක්රියාකාරිත්වය පිරවිය හැකිය, තුන්වන පරාමිතියක් ලෙස callback-ක්රියාකාරිත්වය ද - සජීවනය ක්රියාත්මක කිරීමෙන් පසු ක්රියාත්මක වේ. පරාමිති දෙකම අනිවාර්ය නොවේ:
.slideToggle(කාලසීමාව, [සුමට ක්රියාකාරිත්වය], [callback-ක්රියාකාරිත්වය]);
විවිධ විකල්ප ක්රමයට පැවරිය හැකිය, JavaScript වස්තුවක ස්වරූපයෙන්, අඩංගු වන යතුර: අගය යුගල:
.slideToggle(විකල්ප);
එවැනි වස්තුවක් පහත සඳහන්
පරාමිති සහ ක්රියාකාරිත්වයන් සම්ප්රේෂණය කළ හැකිය - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. මෙම
පරාමිති විස්තර ඔබට ක්රමය සඳහා බැලිය හැකිය
animate. උදාහරණයක් ලෙස,
කාලසීමාව සහ සුමට ක්රියාකාරිත්වය සකසමු:
.slideToggle( {duration: 600, easing: easeInSine} );
උදාහරණය
අපි බොත්තම ඔබා දැමීමෙන් පසු, මෘදුවෙන් සඟවමු
මව් div, එය ඡේද අඩංගු කරයි,
slideToggle ක්රමය භාවිතා කරමින් (මෙම div
අපි සොයා ගනිමු ක්රමය භාවිතා කරමින්
parent),
බොත්තම දෙවන වරට ඔබා දැමීමෙන් පසු, div
නැවත මෘදුවෙන් පෙන්වනු ඇත සහ යනාදිය. යතුරු වචනය
slow පිරවීමෙන්, අපි වේගය සකසමු 600ms වෙත:
<button>toggle text</button>
<div>
<p id='test'>text text text text text text text</p>
<p>text text text text text text text</p>
<p>text text text text text text text</p>
</div>
$('button').click(function() {
$('#test').parent().slideToggle('slow');
});
