jQuery'de hide ve show Metotları

Efektler, bir elementi canlandırmaya izin verir, örneğin - onu yavaşça gizleyebilir veya gösterebilir. Her efekt için kendi jQuery metotları vardır. Haydi hide ve show metotlarıyla başlayalım. hide ve show metotları elementleri gizlemeye ve göstermeye izin verir. Çalışmalarını inceleyelim.

Başlangıç olarak aşağıdaki HTML kodunu alalım:

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

CSS kodu şu şekilde görünüyor:

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

Şimdi Javascript kodunu yazalım, buna göre #hide butonuna tıklandığında element gizlenecek, ve #show butonuna tıklandığında - gösterilecek:

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

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

Efektin yürütme süresi milisaniye cinsinden ayarlanabilir (1000 milisaniye = 1 saniye). Bu durumda efekt, belirtilen süre boyunca yavaşça oynatılacaktır. Haydi efektin yürütme süresini 1 saniye olarak ayarlayalım ve efektin nasıl değiştiğini görelim:

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

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

Aşağıdaki tasarım verilmiştir:

<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 kimliğine sahip bağlantıya tıklandığında, listeyi içeren div'in gizlenmesini, ve #show kimliğine sahip bağlantıya tıklandığında gösterilmesini sağlayın. Her efekt için yürütme süresini 600ms olarak ayarlayın.