Frontend/jquery

slideToggle/ slideUp/ slideDown

dddzr 2022. 3. 8. 23:33

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');