jQuery의 hide 및 show 메서드

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

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

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

CSS 코드는 다음과 같습니다:

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

이제 Javascript 코드를 작성하겠습니다. #hide 버튼을 클릭하면 요소가 숨겨지고, #show 버튼을 클릭하면 표시됩니다:

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

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

이펙트 실행 시간을 밀리초 단위로 지정할 수 있습니다 (1000 밀리초 = 1 초). 이 경우 이펙트는 지정된 시간 동안 부드럽게 재생됩니다. 이펙트 실행 시간을 1초로 설정하고 이펙트가 어떻게 변하는지 살펴보겠습니다:

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

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

html<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>

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