Các phương thức hide và show trong jQuery

Hiệu ứng cho phép tạo hoạt ảnh cho phần tử, ví dụ - ẩn hoặc hiển thị phần tử một cách mượt mà. Với mỗi hiệu ứng đều có những phương thức jQuery riêng. Hãy bắt đầu với các phương thức hide và show. Các phương thức hide và show cho phép ẩn và hiển thị các phần tử. Hãy xem xét cách chúng hoạt động.

Đầu tiên, hãy lấy mã HTML sau:

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

Mã CSS trông như thế này:

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

Bây giờ hãy viết mã Javascript, theo đó khi nhấp vào nút #hide phần tử sẽ bị ẩn đi, và khi nhấp vào #show - sẽ được hiển thị:

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

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

Có thể đặt thời gian thực hiện hiệu ứng bằng mili giây (1000 mili giây = 1 giây). Trong trường hợp này, hiệu ứng sẽ được phát mượt mà trong khoảng thời gian đã đặt. Hãy đặt thời gian thực hiện hiệu ứng là 1 giây và xem cách hiệu ứng thay đổi:

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

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

Cho trước bố cục:

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

Hãy làm sao để khi nhấp vào liên kết có #hide thì div chứa danh sách bị ẩn đi, còn khi nhấp vào liên kết có #show thì nó được hiển thị. Với mỗi hiệu ứng, hãy đặt thời gian thực hiện là 600ms.