슬라이딩

슬라이딩은 HTML 요소의 높이를 조절하여 접었다 폈다 (collapsible) 할 수 있는 기능 slideDown(), slideUp(), slideToggle() 메소드를 이용해 아코디 언(accordian) 혹은 네비게이션 등에 많이 사용

이미지를 사용할 경우엔 반드시 블록 요소에 감싸서 블록 요소에 슬라 이딩 효과를 주어야 애니메이션 진행 과정에서 픽셀 깨짐 현상들이 발 생하지 않음

slideDown() 메소드는 요소의 높이를 0에서 원래 값으로 변경하면서 펼치는 애니메이션 효과를 주기 위해 사용 .slideDown( [duration] [, callback] ) .slideDown( [duration] [, easing] [, callback] ) duration:애니메이션이 실행되는 시간(1/1000초 단위)을 설정하는 문자열 또 는 숫자 값입니다. ‘slow’, normal’, ‘fast’ 문자열을 사용하 수 있습니다. (각각 200, 400, 600) callback: 애니메이션이 끝났을 때 호출되는 함수입니다. easing: 트랜지션에 사용하는 easing 함수 이름의 문자열입니다. easing 함 수는 플러그인이기 때문에 관련 라이브러리 파일이 필요합니다.

slideUp() 메소드는 요소의 높이를 현재 높이에서 0으로 변경하면서 접히는 애니메이션 효과를 주기 위해 사용

slideUp() 메소드가 수행을 완료하면 요소는 dispaly:none 상태가 됨 .slideUp( [duration] [, callback] ) .slideUp( [duration] [, easing] [, callback] ) duration:애니메이션이 실행되는 시간(1/1000초 단위)을 설정하는 문자열 또는 숫자 값입니다. ‘slow’, normal’, ‘fast’ 문자열을 사용하 수 있습니다. (각각 200, 400, 600) callback: 애니메이션이 끝났을 때 호출되는 함수입니다. easing: 트랜지션에 사용하는 easing 함수 이름의 문자열입니다. easing 함수는 플러그인이기 때문 에 관련 라이브러리 파일이 필요합니다.

slideToggle() 메소드는 slideUp()과 slideDown()을 번갈아 실행시켜 애니 메이션 효과를 주기 위해 사용 .slideToggle( [duration] [, callback] ) .slideToggle( [duration] [, easing] [, callback] ) duration:애니메이션이 실행되는 시간(1/1000초 단위)을 설정하는 문자열 또 는 숫자 값입니다. ‘slow’, normal’, ‘fast’ 문자열을 사용하 수 있습니다. (각각 200, 400, 600) callback: 애니메이션이 끝났을 때 호출되는 함수입니다. easing: 트랜지션에 사용하는 easing 함수 이름의 문자열입니다. easing 함 수는 플러그인이기 때문에 관련 라이브러리 파일이 필요합니다.