Metodele hide și show în jQuery

Efectele permit animarea unui element, de exemplu - ascunderea sau afișarea lui graduală. Pentru fiecare efect există propriile sale metode jQuery. Să începem cu metodele hide și show. Metodele hide și show permit ascunderea și afișarea elementelor. Să le analizăm funcționarea.

Pentru început, să luăm următorul cod HTML:

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

Codul CSS arată astfel:

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

Acum să scriem cod Javascript, conform căruia la click pe butonul #hide elementul va fi ascuns, iar la click pe #show - va fi afișat:

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

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

Se poate seta durata de execuție a efectului în milisecunde (1000 milisecunde = 1 secundă). În acest caz, efectul se va reda gradual pe parcursul timpului stabilit. Să setăm durata de execuție a efectului la 1 secundă și să vedem cum se schimbă efectul:

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

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

Este dată structura:

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

Faceți ca la click pe link-ul cu #hide div-ul care conține lista să se ascundă, iar la click pe link-ul cu #show să se afișeze. Pentru fiecare efect setați durata de execuție la 600ms.