hide en show methoden in jQuery

Effecten maken het mogelijk om een element te animeren, bijvoorbeeld - het soepel verbergen of tonen. Voor elk effect bestaan er eigen jQuery methoden. Laten we beginnen met de methoden hide en show. De methoden hide en show maken het mogelijk om elementen te verbergen en te tonen. Laten we hun werking bekijken.

Laten we eerst de volgende HTML code nemen:

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

De CSS code ziet er als volgt uit:

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

Laten we nu de Javascript code schrijven, volgens welke bij het klikken op de knop #hide het element wordt verborgen, en bij het klikken op #show - wordt getoond:

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

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

Het is mogelijk om de uitvoeringstijd van het effect in milliseconden in te stellen (1000 milliseconden = 1 seconde). In dit geval zal het effect soepel afspelen gedurende de opgegeven tijd. Laten we de uitvoeringstijd van het effect op 1 seconde instellen en bekijken hoe het effect verandert:

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

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

Gegeven de opmaak:

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

Zorg ervoor dat bij het klikken op de link met #hide de div, die de lijst bevat, wordt verborgen, en bij de link met #show wordt getoond. Stel voor elk effect de uitvoeringstijd in op 600ms.