제이쿼리: 슬라이드(Slide) 효과 정리
제이쿼리 .slideUp(), .slideDown(), .slideToggle() 메소드를 활용해 요소를 접거나 펼치는 슬라이드 애니메이션을 손쉽게 구현하는 방법
슬라이드 효과란?
슬라이드 효과는 요소의 height(높이) 값을 점진적으로 변경해
자연스럽게 접히거나 펼쳐지는 시각적 애니메이션을 구현합니다.
display: none과는 다르게 부드러운 전환이 가능하며,
FAQ 아코디언, 토글 메뉴 등 다양한 인터페이스에서 활용됩니다.
기본 메소드 소개
1. .slideUp()
- 요소를 위로 접으며 사라지게 함
height → 0으로 점점 줄어듦
$("#slideUpBtn").on("click", function() {
$("#divBox").slideUp(); // 접히면서 사라짐
});
2. .slideDown()
- 요소를 아래로 펼치며 나타나게 함
height: 0 → 원래 높이로 점점 증가
$("#slideDownBtn").on("click", function() {
$("#divBox").slideDown(); // 펼쳐지며 나타남
});
속도 설정
슬라이드 메소드에는 속도를 숫자(ms) 또는 문자 예약어로 지정할 수 있습니다.
- 숫자:
500→ 0.5초 - 예약어:
"slow"(600ms),"fast"(200ms)
$("#divBox").slideUp(500);
$("#divBox").slideDown("fast");
.slideToggle() – 슬라이드 상태 자동 전환
- 요소가 보이면
.slideUp(), 숨겨져 있으면.slideDown()을 자동 실행 - UI 상태 전환 버튼에 적합
$("#slideToggleBtn").on("click", function() {
$("#divBox").slideToggle("fast");
});
슬라이드 메소드 요약
| 메소드 | 설명 |
|---|---|
.slideUp() |
요소를 위로 접어 사라지게 함 (높이 ↓) |
.slideDown() |
요소를 아래로 펼쳐 나타나게 함 (높이 ↑) |
.slideToggle() |
현재 상태에 따라 위 두 메소드 중 하나를 실행 |
응용 예제
1. 순차 슬라이드 효과
$("#sequentialSlide").on("click", function() {
$("#box1").slideUp(500, function() {
$("#box2").slideUp(500, function() {
$("#box3").slideUp(500);
});
});
});
- 요소들이 차례대로 접히며 사라지는 애니메이션
2. FAQ 아코디언 구현
$(".question").on("click", function() {
$(".answer").slideUp(); // 모든 답변 닫기
$(this).next(".answer").slideToggle(); // 해당 답변만 열기
});
- 단 하나의 답변만 열리는 구조
- UI/UX 향상에 효과적
3. 사용자 입력으로 슬라이드 속도 조절
$("#applySlide").on("click", function() {
const speed = parseInt($("#slideSpeed").val());
if (!isNaN(speed)) {
$("#divBox").slideToggle(speed);
} else {
alert("유효한 숫자를 입력하세요!");
}
});
- 사용자 지정 속도로 슬라이드 효과 실행 가능
콜백 함수 활용
슬라이드 종료 후 특정 작업을 처리할 수 있습니다.
$("#slideUpBtn").on("click", function() {
$("#divBox").slideUp(1000, function() {
alert("슬라이드 업 완료!");
});
});
- 콜백은 슬라이드가 완전히 종료된 후 실행됩니다.
활용 팁
- 자연스러운 인터페이스 구현
- 메뉴, FAQ, 탭, 드롭다운 등에서
.slideToggle()적극 활용
- 메뉴, FAQ, 탭, 드롭다운 등에서
- 속도 조절로 UX 개선
- 사용자의 클릭에 즉각 반응하면서도 너무 빠르지 않게 설정
- 콜백 함수로 다음 동작 연결
- 애니메이션 순서 지정이나 사용자 피드백 제공에 적합
질문 정리
.slideUp()과 .hide()의 차이는 뭔가요?
→ .slideUp()은 애니메이션 효과를 동반해 접히며 사라짐, .hide()는 즉시 숨김 처리합니다.
슬라이드 효과는 요소 크기에 따라 다르게 보이나요?
→ 네, 요소의 height가 다르면 애니메이션 속도 체감도 달라질 수 있습니다.
슬라이드 효과 중 다른 작업을 하면 충돌하나요?
→ 제이쿼리는 내부적으로 큐(queue) 처리로 충돌을 방지하지만, .stop() 메소드로 제어 가능하기도 합니다.
토글 효과는 클릭할 때마다 어떻게 상태를 판단하나요?
→ 내부적으로 display: none 또는 height: 0 상태를 감지해 전환됩니다.
댓글남기기