jQuery에서의 슬라이드(slide) 효과는 해당 요소의 CSS height 속성값을 빠르게 변경하여 표현.
target 요소가 스르륵 접히고 펼쳐지는 효과를 구현할 수 있다!!
- 파라미터 : .slideToggle( [움직임 시간(duration)] [, 늦춤 함수(easing)] [, 움직이고 나서 실행할 함수(callback)] )
- 기본은 400 (0.4초)이다.
- 숫자 대신 “slow”(600), “fast”(200) 등의 예약어도 사용가능
$("#elementId").slideUp(500); // id가 "elementId"인 요소를 0.5초 동안 올라가면서 사라지게 한다.
- slideUp() : 요소를 사라지게함.
- slideDown(): 요소를 나타냄.
- slideToggle(): 현제 요소의 상태에 따라 사라지거나 나타나게함.
*slideToggle 후 div 크기 재조정이 필요할 경우가 있음(DB로 부터 list를 다시받아옴)
$(".subMenu).css('height', 'fit-content');
'Frontend > jquery' 카테고리의 다른 글
element 비활성화 (readonly, disabled, pointer-events) (0) | 2022.10.10 |
---|---|
jquery event 중복 발생 방지/ event 해제 (0) | 2022.03.08 |
jquery event binding(여러 요소, 여러 이벤트 동시에 바인딩) (0) | 2022.03.08 |