JS - slideDown, slideUp, fadeIn, fadeOut

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

아코디언 구현 - 애니메이션 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() 사용법과 같다.