Metoderne hide og show i jQuery

Effekter giver mulighed for at animere et element, for eksempel - skjule eller vise det jævnt. For hver effekt findes der sine egne jQuery-metoder. Lad os starte med metoderne hide og show. Metoderne hide og show giver mulighed for at skjule og vise elementer. Lad os se på deres funktion.

Lad os først tage følgende HTML-kode:

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

CSS-koden ser sådan ud:

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

Lad os nu skrive Javascript-koden, ifølge hvilken ved at klikke på knappen #hide vil elementet blive skjult, og ved at klikke på #show - blive vist:

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

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

Det er muligt at angive effektens varighed i millisekunder (1000 millisekunder = 1 sekund). I dette tilfælde vil effekten afspilles jævnt i løbet af den angivne tid. Lad os angive effektens varighed til 1 sekund og se, hvordan effekten ændres:

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

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

Givet layout:

<p>
	<a id="hide" href="">hide</a> <a id="show" href="">show</a>
</p>
<div id="block">
	<ol>
		<li>tekst</li>
		<li>tekst</li>
		<li>tekst</li>
		<li>tekst</li>
		<li>tekst</li>
		<li>tekst</li>
		<li>tekst</li>
		<li>tekst</li>
		<li>tekst</li>
		<li>tekst</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ådan, at når der klikkes på linket med #hide, skjules div'en, der indeholder listen, og når der klikkes på linket med #show, vises den. For hver effekt skal du angive en varighed på 600ms.