jQuery හි hide හා show ක්‍රම

ප්‍රභාවනයන් මගින් මූලද්‍රව්‍යයක් සජීවීකරණය කළ හැකිය, උදාහරණයක් ලෙස - එය සිනිඳු ලෙස සඟවා හෝ පෙන්වීම. සෑම ප්‍රභාවනයක් සඳහාම ඒවායේම jQuery ක්‍රම පවතී. අපි ක්‍රම වලින් ආරම්භ කරමු hide සහ show. hide සහ show ක්‍රම මගින් මූලද්‍රව්‍ය සඟවා හෝ පෙන්විය හැකිය. ඒවායේ ක්‍රියාකාරිත්වය සලකා බලමු.

පළමුව, පහත HTML කේතය ගනිමු:

<button id="hide">hide</button>
<button id="show">show</button>
<div id="elem">text...</div>

CSS කේතය මේ ආකාරයෙන් පෙනේ:

#elem {
	padding: 10px;
	width: 150px;
	height: 150px;
	border: 1px solid green;
	margin-top: 10px;
}

දැන් අපි Javascript කේතය ලියන්නෙමු, ඒ අනුව #hide බොත්තම ක්ලික් කිරීමෙන් මූලද්‍රව්‍යය සඟවන අතර, #show බොත්තම ක්ලික් කිරීමෙන් - පෙන්වනු ඇත:

$('#hide').click(function() {
	$('#elem').hide();
});

$('#show').click(function() {
	$('#elem').show();
});

ප්‍රභාවනය ක්‍රියාත්මක කිරීමේ කාලය සැකසිය හැකිය මිලි තත්පර වලින් (මිලි තත්පර 1000 = තත්පර 1). මෙම අවස්ථාවේදී, ප්‍රභාවනය සිනිඳු ලෙස වාදනය වේ දී ඇති කාලය තුළ. අපි සැකසමු ප්‍රභාවනය ක්‍රියාත්මක කිරීමේ කාලය 1 තත්පරයක් සහ ප්‍රභාවනය වෙනස් වන ආකාරය බලමු:

$('#hide').click(function() {
	$('#elem').hide(1000);
});

$('#show').click(function() {
	$('#elem').show(1000);
});

පිරිසැලසුම ලබා දී ඇත:

<p>
	<a id="hide" href="">hide</a> <a id="show" href="">show</a>
</p>
<div id="block">
	<ol>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
		<li>text</li>
	</ol>
</div>

body {
	font-size: 18px;
}
a {
	color: blue;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
ol {
	margin: 0px;
	padding-left: 10px;
}
li {
	list-style-type: inside;
}
div {
	display: inline-block;
	padding: 30px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

#hide සමඟ සබැඳිය ක්ලික් කළ විට ලැයිස්තුව අඩංගු div එක සඟවන්න, සහ #show සබැඳිය සමඟ පෙන්වන්න. සෑම ප්‍රභාවනයක් සඳහාම ක්‍රියාත්මක කිරීමේ කාලය 600ms වශයෙන් සකසන්න.