Μέθοδοι hide και show στο jQuery

Τα εφέ επιτρέπουν την κινούμενη απεικόνιση ενός στοιχείου, για παράδειγμα - να το κρύψουμε ή να το εμφανίσουμε ομαλά. Για κάθε εφέ υπάρχουν οι δικές τους μέθοδοι jQuery. Ας ξεκινήσουμε με τις μεθόδους hide και show. Οι μέθοδοι hide και show επιτρέπουν την απόκρυψη και την εμφάνιση στοιχείων. Ας εξετάσουμε τη λειτουργία τους.

Για αρχή, ας πάρουμε τον ακόλουθο κώδικα HTML:

<button id="hide">hide</button>
<button id="show">show</button>
<div id="elem">κείμενο...</div>

Ο κώδικας CSS μοιάζει με αυτό:

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

Τώρα ας γράψουμε κώδικα Javascript, σύμφωνα με τον οποίο με το πάτημα στο κουμπί #hide το στοιχείο θα κρύβεται, και με το πάτημα στο #show - θα εμφανίζεται:

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

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

Μπορείτε να ορίσετε τον χρόνο εκτέλεσης του εφέ σε χιλιοστά του δευτερολέπτου (1000 χιλιοστά = 1 δευτερόλεπτο). Σε αυτή την περίπτωση, το εφέ θα αναπαράγεται ομαλά κατά τη διάρκεια του καθορισμένου χρόνου. Ας ορίσουμε χρόνο εκτέλεσης εφέ 1 δευτερόλεπτο και ας δούμε πώς αλλάζει το εφέ:

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

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

Δίνεται η διαμόρφωση:

<p>
	<a id="hide" href="">hide</a> <a id="show" href="">show</a>
</p>
<div id="block">
	<ol>
		<li>κείμενο</li>
		<li>κείμενο</li>
		<li>κείμενο</li>
		<li>κείμενο</li>
		<li>κείμενο</li>
		<li>κείμενο</li>
		<li>κείμενο</li>
		<li>κείμενο</li>
		<li>κείμενο</li>
		<li>κείμενο</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;
}

Κάντε έτσι ώστε με το πάτημα στον σύνδεσμο με #hide το div, που περιέχει τη λίστα, να κρύβεται, και με τον σύνδεσμο #show να εμφανίζεται. Για κάθε εφέ ορίστε χρόνο εκτέλεσης 600ms.