[JQuery] CSS 슬라이드 효과 표현

JQuery로 CSS인 height를 조절하여 슬라이드 되듯이 늘어나는 효과를 나타냅니다

 

서서히 커지는 효과라고 생각하시면 될거같네요!

 

메서드들을 한번 알아볼까요!

슬라이드 효과

slideUp

서서히 올라가면서 사라지는 효과를 보여줍니다

.box {
  width: 100px;
  height: 100px;
}

<div class="box"></div>

이제 스크립트를 알아볼까요

$(".box").slideUp(); // 일반적인 속도로 height가 0으로 변함
$(".box").slideUp(2000); // 2초에 걸쳐 height가 0으로 변함
$(".box").slideUp('fast'); // 빠른 속도로 height가 0으로 변함
$(".box").slideUp('slow'); // 느린 속도로 height가 0으로 변함

이렇게 속도 조절이 가능하고 시간 fast, slow를 통해서도 컨트롤 가능합니다

slideDown

서서히 내려오면서 나타나는 효과를 보여줍니다

.box {
  width: 100px;
  height: 100px;
}

<div class="box"></div>

이제 스크립트를 알아볼까요

$(".box").slideDown(); // 일반적인 속도로 height가 0 -> 100px으로 변함
$(".box").slideDown(2000); // 2초에 걸쳐 height가 0 -> 100px으로 변함
$(".box").slideDown('fast'); // 빠른 속도로 height가 0 -> 100px으로 변함
$(".box").slideDown('slow'); // 느린 속도로 height가 0 -> 100px으로 변함

이렇게 속도 조절이 가능하고 시간 fast, slow를 통해서도 컨트롤 가능합니다

slideToggle

현재 표시 상태에 따라 다른 동작을 합니다

 

즉 선택한 요소가 현재 사라진 상태라면 slideDown메소드의 동작을 수행하고, 나타나 있는 상태라면 slideUp메소드의 동작을 수행합니다

.box {
  width: 100px;
  height: 100px;
}

<div class="box"></div>

이제 스크립트를 알아볼까요

$(".box").slideToggle(); // 일반적인 속도 height가 0일때 100px, 100px일때 0 으로 변함
$(".box").slideToggle(2000); // 2초에 걸쳐 height가  0일때 100px, 100px일때 0 으로 변함
$(".box").slideToggle('fast'); // 빠른 속도로 height가 0일때 100px, 100px일때 0 으로 변함
$(".box").slideToggle('slow'); // 느린 속도로 height가 0일때 100px, 100px일때 0 으로 변함

이렇게 속도 조절이 가능하고 시간 fast, slow를 통해서도 컨트롤 가능합니다