Metoderna hide och show i jQuery

Effekter gör det möjligt att animera ett element, till exempel att dölja eller visa det mjukt. För varje effekt finns det sina egna jQuery-metoder. Låt oss börja med metoderna hide och show. Metoderna hide och show gör det möjligt att dölja och visa element. Låt oss undersöka hur de fungerar.

Låt oss först ta följande HTML-kod:

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

CSS-koden ser ut så här:

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

Nu skriver vi Javascript-kod enligt vilken vid klick på knappen #hide kommer elementet att döljas, och vid klick på #show - att visas:

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

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

Man kan ställa in effektens varaktighet i millisekunder (1000 millisekunder = 1 sekund). I detta fall kommer effekten att spelas upp mjukt under den angivna tiden. Låt oss ställa in effektens varaktighet till 1 sekund och se hur effekten ändras:

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

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

Följande layout ges:

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

Gör så att när man klickar på länken med #hide döljs div:en som innehåller listan, och när man klickar på länken med #show visas den. För varje effekt, ställ in varaktigheten till 600ms.