jQuery의 slideUp 및 slideDown 메소드

slideUp 메소드와 slideDown 메소드는 요소를 "접기"와 "펼치기" 할 수 있게 해줍니다 (이 메소드들은 또한 효과 실행 시간을 매개변수로 받으며, 지정하지 않으면 기본값인 400ms가 사용됩니다). 이게 어떻게 보이는지 다음 예제를 통해 확인해 보세요.

두 개의 버튼과 div가 있다고 가정해 봅시다:

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

이제 slideUp 메소드와 slideDown 메소드를 적용합니다:

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

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