jQuery-də hide və show metodları

Effektlər elementi animasiya etməyə imkan verir, məsələn - onu tədricən gizlədin və ya göstərin. Hər bir effekt üçün jQuery-də öz metodları mövcuddur. Gəlin hide və show metodları ilə başlayaq. hide və show metodları elementləri gizlətməyə və göstərməyə imkan verir. Gəlin onların işini nəzərdən keçirək.

Əvvəlcə aşağıdakı HTML kodunu götürək:

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

CSS kodu belə görünür:

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

İndi Javascript kodunu yazaq, ona əsasən #hide düyməsinə kliklənildikdə element gizlənəcək, #show düyməsinə kliklənildikdə isə - göstəriləcək:

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

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

Effektin icra müddətini millisaniyələrdə təyin etmək olar (1000 millisaniyə = 1 saniyə). Bu halda effekt təyin olunmuş müddət ərzində tədricən icra olunacaq. Gəlin effektin icra müddətini 1 saniyə təyin edək və effektin necə dəyişdiyinə baxaq:

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

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

Verilmiş vərstq:

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

Elə edin ki, #hide id-li linkə kliklənildikdə siyahını ehtiva edən div gizlənsin, #show id-li linkə kliklənildikdə isə göstərilsin. Hər bir effekt üçün icra müddətini 600ms təyin edin.