jQuery - Slider 효과

슬라이드 효과를 사용할 수 있는 메소드는 다음 표와 같습니다.

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

.slideUp() 과 .slideDown()

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

$(select).slideUp();

$(select).slideUp(speed);

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

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

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

슬라이드 방향은 밑에서 위로, 위에서 아래 방향으로 요소를 보여주거나 감추게 합니다.

'감추기'를 누르면 위로 서서히 올라가면서 요소를 감추고, 감췄다는 메시지를 띄웁니다. 그리고, '보이기'버튼을 누르면 아래로 서서히 내려가면서 요소를 보여주고 열었다는 메시지를 띄우는 예제입니다.

<style>
.use-nth {
  width: 200px;
  height: 100px;
  background: yellow;
}
</style>

<script>
$(function(){
  $("#slide_up").click(function(){
    $(".use-nth").slideUp(1000, 'swing', function(){
      alert("요소를 숨겼당~!");
    });
  });

  $("#slide_down").click(function(){
    $(".use-nth").slideDown(1000, 'swing', function(){
      alert("요소를 다시 열었당~!");
    });
  });
});
</script>

<div class="use-nth">안녕 하보니</div>

<button id="slide_up">감추기</button>
<button id="slide_down">보이기</button>

.slideToggle()

.slideToggle() 은 .slideUp() 과 .slideDown() 을 하나로 합친 메소드입니다. 감춰져 있으면 슬라이드로 서서히 보여주고, 보여져 있으면 위로 올라가면서 서서히 감춥니다.

버튼을 누를 때마다 감추는 소스 따로, 보여주는 소스 따로 하기 보다 .slideToggle() 메소드 하나로 작성하는 게 훨씬 깔끔하고 간결하게 합니다.

매개변수는 위와 동일하게 모두 사용할 수 있습니다.

<style>
.use-nth {
  width: 200px;
  height: 100px;
  background: yellow;
}
</style>

<script>
$(function(){
  $("#slide_toggle").click(function(){
    $(".use-nth").slideToggle(1000, 'swing', function(){
      alert("눌렀네");
    });
  });
});
</script>

<div class="use-nth">안녕 하보니</div>

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