Méthodes hide et show dans jQuery

Les effets permettent d'animer un élément, par exemple - le cacher ou l'afficher en douceur. Il existe des méthodes jQuery spécifiques pour chaque effet. Commençons par les méthodes hide et show. Les méthodes hide et show permettent de cacher et d'afficher les éléments. Examinons leur fonctionnement.

Pour commencer, prenons le code HTML suivant :

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

Le code CSS ressemble à ceci :

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

Écrivons maintenant le code Javascript selon lequel au clic sur le bouton #hide l'élément sera caché, et au clic sur #show - il sera affiché :

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

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

Il est possible de définir la durée de l'effet en millisecondes (1000 millisecondes = 1 seconde). Dans ce cas, l'effet sera joué en douceur pendant le temps spécifié. Définissons la durée de l'effet sur 1 seconde et voyons comment l'effet change :

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

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

Code HTML/CSS donné :

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

Faites en sorte qu'au clic sur le lien avec #hide le div contenant la liste se cache, et au clic sur le lien avec #show il s'affiche. Pour chaque effet, définissez la durée d'exécution sur 600ms.