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 ҳаволоси босилганда рўйхатни ўз ичига олган див яширилиши, #show ҳаволоси босилганда эса кўрсатилиши учун қилинг. Ҳар бир эффект учун бажариш вақтини 600мс да белгиланг.