jQuery - Show Hide 효과

HTML 문서의 요소를 보이게 하거나 보이지 않게 하는 부분은 보통 CSS 를 이용하지만 단순하고, 단조로운 부분이 없지 않아 있습니다. 그런데, 제이쿼리를 이용하면 단조로운 부분을 좀 더 역동적인 효과를 기대할 수 있습니다.

이 메소드를 이용하면 서서히 사라지거나 서서히 보이게 할 수 있습니다.

메소드	설 명
.hide(speed, easing, callback)	요소를 감추는 메소드 1. speed: 감추는 속도를 제어. 선택 사항, 기본값: 400(밀리 초) slow: 천천히. 200(밀리 초) fast: 빠르게. 600(밀리 초) 밀리 초: 1000/1(초)를 지정 2. easing: 가속도를 제어. (선택 사항) swing: 시작과 끝이 느리게 움직이지만 중간에는 빠르게 움직임. 기본값 linear: 일정한 속도로 움직임 3. callback: 콜백 함수는 작업이 완료된 후에 실행됨. (선택 사항)
.show(speed, easing, callback)	숨겨진 요소를 보여주는 메소드 1. speed: 보여주는 속도를 제어. 선택 사항, 기본값: 400(밀리 초) slow: 천천히. 200(밀리 초) fast: 빠르게. 600(밀리 초) 밀리 초: 1000/1(초)를 지정 2. easing: 가속도를 제어. (선택 사항) swing: 시작과 끝이 느리게 움직이지만 중간에는 빠르게 움직임. 기본값 linear: 일정한 속도로 움직임 3. callback: 콜백 함수는 작업이 완료된 후에 실행됨. (선택 사항)
.toggle(speed, easing, callback)	요소를 보여주거나 감추는 메소드 speed, easing, callback 매개변수를 그대로 사용 가능. (요소가 숨겨져 있으면 .show(), 보이면 .hide() 가 됨)

.hide() 와 .show()

보여주는 메소드와 감추는 메소드는 동일하게 다음의 방식 중 하나를 이용합니다.

$(select).show();

$(select).show(speed);

$(select).show(speed, function);

$(select).show(speed, easing);

$(select).show(speed, easing, function);

요소를 보여줄 때나 감출 때의 방향은 하단 오른쪽에서 왼쪽 상단 방향으로 작아지면서 감추거나 커지면서 보여줍니다.

<script>
$(function(){
  $("#hide").click(function(){
    $(".use-nth").hide(2000, function(){alert('감췄당');});
  });

  $("#show").click(function(){
    $(".use-nth").show(2000, function(){alert('보인당');});
  });
});
</script>

<div class="use-nth"><img src="aran.jpg"></div>

<button id="hide">감추기</button>
<button id="show">보이기</button>

.toggle()

.toggle() 은 .hide() 와 .show() 의 기능을 토글 메소드 하나로 제어할 수 있습니다. 버튼을 누르면 감췄던 요소를 보여주고, 보여진 요소를 다시 감추게 합니다.

<script>
$(function(){
  $("#toggle").click(function(){
    $(".use-nth").toggle(2000, function(){alert('눌렀넹');});
  });
});
</script>

<div class="use-nth"><img src="aran.jpg"></div>

<button id="toggle">보여주기/감추기</button>