Kaedah hide dan show dalam jQuery

Effek membolehkan kita menganimasikan elemen, contohnya - menyembunyikan atau menunjukkannya secara lancar. Untuk setiap efek terdapat kaedah jQuery tersendiri. Mari kita mulakan dengan kaedah hide dan show. Kaedah hide dan show membolehkan menyembunyikan dan menunjukkan elemen. Mari kita kaji cara kerjanya.

Sebagai permulaan, mari kita ambil kod HTML berikut:

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

Kod CSS kelihatan seperti ini:

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

Sekarang tulis kod Javascript, di mana apabila butang #hide ditekan elemen akan disembunyikan, dan apabila butang #show ditekan - elemen akan ditunjukkan:

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

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

Kita boleh menetapkan masa pelaksanaan efek dalam milisaat (1000 milisaat = 1 saat). Dalam kes ini, efek akan dimainkan secara lancar sepanjang masa yang ditetapkan. Mari kita tetapkan masa pelaksanaan efek selama 1 saat dan lihat bagaimana efek berubah:

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

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

Diberi markup:

<p>
	<a id="hide" href="">hide</a> <a id="show" href="">show</a>
</p>
<div id="block">
	<ol>
		<li>teks</li>
		<li>teks</li>
		<li>teks</li>
		<li>teks</li>
		<li>teks</li>
		<li>teks</li>
		<li>teks</li>
		<li>teks</li>
		<li>teks</li>
		<li>teks</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;
}

Buat agar apabila pautan dengan #hide ditekan, div yang mengandungi senarai, disembunyikan, dan apabila pautan dengan #show ditekan, ianya ditunjukkan. Untuk setiap efek tetapkan masa pelaksanaan selama 600ms.