Metodai hide ir show jQuery

Efektai leidžia animuoti elementą, pavyzdžiui - sklandžiai jį paslėpti arba parodyti. Kiekvienam efektui yra savi jQuery metodai. Pradėkime nuo metodų hide ir show. Metodai hide ir show leidžia slėpti ir rodyti elementus. Panagrinėkime jų veikimą.

Pirmiausia paimkime tokį HTML kodą:

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

CSS kodas atrodo taip:

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

Dabar parašykime Javascript kodą, pagal kurį paspaudus mygtuką #hide elementas bus paslėptas, o paspaudus #show - rodomas:

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

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

Galima nustatyti efekto vykdymo laiką milisekundėmis (1000 milisekundžių = 1 sekundė). Tokiu atveju efektas bus sklandžiai atkurtas nurodyto laiko metu. Nustatykime efekto vykdymo laiką 1 sekundę ir pažiūrėkime, kaip pasikeis efektas:

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

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

Duotas HTML maketas:

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

Padarykite taip, kad paspaudus nuorodą su #hide div'as, kuriame yra sąrašas, būtų paslėptas, o paspaudus nuorodą su #show - rodytųsi. Kiekvienam efektui nustatykite vykdymo laiką 600ms.