Methoden hide und show in jQuery

Effekte ermöglichen es, ein Element zu animieren, zum Beispiel es sanft auszublenden oder anzuzeigen. Für jeden Effekt gibt es eigene jQuery-Methoden. Lassen Sie uns mit den Methoden hide und show beginnen. Die Methoden hide und show ermöglichen es, Elemente auszublenden und anzuzeigen. Sehen wir uns ihre Funktionsweise an.

Nehmen wir zunächst den folgenden HTML-Code:

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

Der CSS-Code sieht so aus:

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

Schreiben wir nun den Javascript-Code, wonach beim Klick auf die Schaltfläche #hide das Element ausgeblendet wird und beim Klick auf #show angezeigt wird:

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

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

Man kann die Ausführungszeit des Effekts in Millisekunden angeben (1000 Millisekunden = 1 Sekunde). In diesem Fall wird der Effekt sanft während der angegebenen Zeit abgespielt. Geben wir die Ausführungszeit des Effekts mit 1 Sekunde an und sehen wir uns an, wie sich der Effekt ändert:

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

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

Gegeben ist das folgende Markup:

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

Sorgen Sie dafür, dass beim Klick auf den Link mit #hide der die Liste enthaltende Div ausgeblendet wird und beim Klick auf den Link mit #show angezeigt wird. Geben Sie für jeden Effekt eine Ausführungszeit von 600ms an.