jQuery의 hide 및 show 메서드

이펙트는 요소에 애니메이션을 적용할 수 있게 해주며, 예를 들어 요소를 부드럽게 숨기거나 표시할 수 있습니다. 각 이펙트에는 해당하는 jQuery 메서드가 있습니다. hide 메서드와 show 메서드부터 시작해 보겠습니다. hide와 show 메서드는 요소를 숨기고 표시할 수 있게 해줍니다. 그 동작을 살펴보겠습니다.

먼저 다음 HTML 코드를 사용하겠습니다:

<button id="hide">hide</button>
<button id="show">show</button>
<div id="elem">text...</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>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;
}

#hide 링크를 클릭하면 목록을 포함하는 div가 숨겨지고, #show 링크를 클릭하면 표시되도록 만드세요. 각 이펙트의 실행 시간은 600ms로 설정하세요.