페이딩

페이딩은 HTML 요소의 불투명도(opacity)를 조절하는 기능으로 fadeIn(), fadeOut(), fadeToggle(), fadeTo() 메소드를 사용해 요소를 점점 밝게 또는 점점 흐리게 보이도록 조절함

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

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

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

fadeTo() 메소드는 0 ~ 1 사이의 값을 가진 불투명도(opacity)를 지정하여 서서히 사라지거 나 나타나는 애니메이션 효과를 주기 위해 사용 .fadeTo( duration, opacity [, callback] ) .fadeTo( duration, opacity [, easing] [, callback] ) duration:애니메이션이 실행되는 시간(1/1000초 단위)을 설정하는 문자열 또는 숫자 값입니 다. ‘slow’, normal’, ‘fast’ 문자열을 사용하 수 있습니다. (각각 200, 400, 600) opacity: 0 ~ 1 사이의 불투명도를 나타내는 숫자 값입니다. callback: 애니메이션이 끝났을 때 호출되는 함수입니다. easing: 트랜지션에 사용하는 easing 함수 이름의 문자열입니다. easing 함수는 플러그인 이기 때문에 관련 라이브러리 파일이 필요합니다.