Meetodid hide ja show jQuery-s

Effektid võimaldavad elementi animeerida, näiteks - sujuvalt peita või näidata seda. Iga effekti jaoks on olemas oma jQuery meetodid. Alustame meetoditega hide ja show. Meetodid hide ja show võimaldavad elemente peita ja näidata. Vaatame nende tööd.

Alustuseks võtame järgmise HTML koodi:

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

CSS kood näeb välja selline:

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

Nüüd kirjutame Javascript koodi, mille kohaselt nupu #hide vajutamisel element peidetakse ja nupu #show vajutamisel - näidatakse:

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

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

Saab määrata effekti täitmise aja millisekundites (1000 millisekundit = 1 sekund). Sel juhul mängitakse effekt sujuvalt etteantud aja jooksul. Määrame effekti täitmise ajaks 1 sekundi ja vaatame, kuidas effekt muutub:

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

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

Antud on veebilehe kujundus:

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

Tehke nii, et lingile #hide vajutades div, mis sisaldab loendit, peituks, ja lingile #show vajutades näidataks. Iga effekti jaoks määrake täitmise aeg 600ms.