Metodes hide un show jQuery

Efekti ļauj animēt elementu, piemēram - vienmērīgi to paslēpt vai parādīt. Katram efektam ir savas jQuery metodes. Sāksim ar metodēm hide un show. Metodes hide un show ļauj slēpt un rādīt elementus. Apskatīsim to darbību.

Sākumā ņemsim šādu HTML kodu:

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

CSS kods izskatās šādi:

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

Tagad uzrakstīsim Javascript kodu, saskaņā ar kuru noklikšķinot uz pogas #hide elements tiks paslēpts, bet noklikšķinot uz #show - parādīts:

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

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

Var iestatīt efekta izpildes laiku milisekundēs (1000 milisekundes = 1 sekunde). Šajā gadījumā efekts tiks vienmērīgi atskaņots norādītajā laikā. Iestatīsim efekta izpildes laiku 1 sekundi un redzēsim, kā efekts mainīsies:

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

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

Dota izkārtojuma atkārtojums:

<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;
}

Iestatiet tā, lai noklikšķinot uz saites ar #hide div, kas satur sarakstu, tiktu paslēpts, bet noklikšķinot uz saites ar #show tiktu parādīts. Katram efektam iestatiet izpildes laiku 600ms.