Усулҳои hide ва show дар jQuery

Таъсирҳо имкон медиҳанд, ки элемент аниматсия карда шавад, масалан - ба таври оҳиста пинҳон кардан ё нишон додани он. Барои ҳар як таъсир усулҳои худ дар jQuery мавҷуданд. Биёед аз усулҳои hide ва show оғоз кунем. Усулҳои hide ва show имкон медиҳанд, ки элементҳоро пинҳон кунанд ё нишон диҳанд. Кори онҳоро дида мебароем.

Барои оғоз HTML-коди зеринро мегирем:

<button id="hide">hide</button>
<button id="show">show</button>
<div id="elem">матн...</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>матн</li>
		<li>матн</li>
		<li>матн</li>
		<li>матн</li>
		<li>матн</li>
		<li>матн</li>
		<li>матн</li>
		<li>матн</li>
		<li>матн</li>
		<li>матн</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мс муқаррар кунед.