JS - slideDown, slideUp, fadeIn, fadeOut

RYU·2025년 5월 6일

웹 기초

목록 보기
41/46

아코디언 구현 - 기본 디자인

아코디언 구현 - 애니메이션 x

아코디언 구현 - slideDown(), slideUp()

  • slideUp() : 선택한 요소가 서서히 올라가면서 사라지는 효과를 보여주는 메서드

  • slideDown() : 선택한 요소가 서서히 내려오면서 나타는 효과를 보여주는 메서드

  • slideDown()을 사용하기 위해서는 display:none이 필수이다.

slideDown(), slideUp() 사용법


$(선택 요소).slideUp(300); // 300은 0.3초를 의미
$(선택 요소).slideUp('slow');
$(선택 요소).slideUp('fast');

$(선택 요소).slideDown(300); // 300은 0.3초를 의미
$(선택 요소).slideDown('slow');
$(선택 요소).slideDown('fast');

아코디언 구현 - fadeIn(), fadeOut()

  • fadeIn() : 선택자로 정한 요소를 서서히 나타나게 해주는 메서드

  • fadeOut() : 선택자로 정한 요소를 서서히 사라지게 해주는 메서드

  • fadeIn()fadeOut() 사용법은 slideDown() 사용법과 같다.

0개의 댓글