Metodes hide en show in jQuery

Effekte laat jou toe om 'n element te animeer, bv. - om dit glad te verberg of te wys. Vir elke effek is daar sy eie jQuery-metodes. Kom ons begin met die hide en show metodes. Die metodes hide en show laat toe om elemente te verberg en te wys. Kom ons kyk na hul werking.

Kom ons neem eers die volgende HTML-kode:

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

Die CSS-kode lyk so:

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

Kom ons skryf nou die Javascript-kode, volgens welke met die klik op die knoppie #hide die element sal verdwyn, en met die klik op #show - sal dit verskyn:

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

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

Jy kan die tyd vir die effek spesifiseer in millisekondes (1000 millisekondes = 1 sekonde). In hierdie geval sal die effek glad gespeel word oor die gespesifiseerde tyd. Kom ons spesifiseer die uitvoeringstyd van die effek as 1 sekonde en kyk hoe die effek verander:

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

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

Gegee die opmaak:

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

Maak dit so dat wanneer daar op die skakel met #hide geklik word, die div wat die lys bevat, verdwyn, en op die skakel met #show verskyn. Vir elke effek, spesifiseer die uitvoeringstyd as 600ms.