.animate() 메소드

 

.animate() 메소드

제이쿼리에서는 animate() 메소드를 이용하여 사용자가 원하는 이펙트 효과를 직접 정의할 수 있습니다.

.animate() 메소드는 여러 CSS 속성을 이용하여 새로운 이펙트 효과를 만들어 줍니다.

 

$(선택자).animate(properties [,duration][,easing][,complete]);

 

인자	설명
properties	·       프로퍼티 파라미터는 필수항목입니다. ·       이펙트 효과를 구성할 CSS 속성을 정의합니다.
duration	·       이펙트 효과가 지속될 시간을 전달합니다.
easing (easing function)	·       이펙트 효과의 시간당 속도를 설정할 수 있습니다. ·       "linear", "swing" 지정할 수 있으며 기본값은 "swing" 입니다. ·         값 설명 swing 끝점에 가면 속도가 살짝 느려지게 됩니다. linear 끝점에 가도 속도를 그대로 유지합니다.
complete (callback function)	·       이펙트 효과의 동작이 완료된 후에 실행할 콜백 함수를 정의합니다

 

 

 

 

애니메이션 움직임 속성

모든 움직임에 관련된 속성들은 단수 수치 값을 이용해서 움직임을 줄 수 있지만 비수치형 속성값들로는 애니메이션 효과를 줄 수 없습니다.

jQuery의 경우 기본 기능을 사용하여 단수 수치값을 사용가능 한 속성에 애니메이션 움직임을 줄 수 있습니다.

구분	설명
단수 수치값	·       수치값을 이용해 애니메이션 효과를 줄 수 있습니다. ·       속성 값들은 픽셀단위로 제어할 수 있으며, ·       em과 %같은 값들도 지원합니다. ·       width, height, left와 같은 수치형은 움직임을 줄 수 있습니다.
비수치형 속성값	·       애니메이션 효과를 줄 수 없습니다. ·       background-color와 같은 비수치형은 움직임을 줄 수 없습니다.

 

 

duration(애니메이션에서 지속시간)

·       기본단위 ms는 밀리세컨드(milliseconds)로 1000분의 1초를 의미

·       높은 값을 주면 느리게 움직이고, 작은 값을 주면 빠르게 움직입니다.

·       만약 값을 설정하지 않으면 기본값으로 400 밀리세컨드가 세팅 됩니다.

·       fast와 slow라는 문자열을 사용하여 지속시간을 설정할 수도 있습니다.

 

 

수치값	지속시간(duration)
값 생략	400ms (기본값)
fast	200ms
slow	600ms

 

 

애니메이션 CSS 속성

.animate() 메소드는 색(color)에 관한 속성을 제외한 거의 모든 CSS 속성을 사용할 수 있습니다.

.css() 메소드에서는 하이픈(-)으로 연결된 CSS 속성 명과 camelCase 방식으로 바꾼 속성 명을 둘 다 사용할 수 있습니다. 하지만 .animate() 메소드에서는 camelCase 방식의 속성 명만 사용할 수 있습니다.

 

.animate() 메소드에서 사용할 수 있는 CSS 속성은 다음과 같습니다.

·       backgroundPositionX

·       backgroundPositionY

·       borderWidth

·       borderBottomWidth

·       borderLeftWidth

·       borderRightWidth

·       borderTopWidth

·       borderSpacing

·       margin

·       marginBottom

·       marginLeft

·       marginRight

·       marginTop

·       outlineWidth

·       padding

·       paddingBottom

·       paddingLeft

·       paddingRight

·       paddingTop

·       height

·       width

·       maxHeight

·       maxWidth

·       minHeight

·       minWidth

·       fontSize

·       bottom

·       left

·       right

·       top

·       letterSpacing

·       wordSpacing

·       lineHeight

·       textIndent

 

 

 

 

 

 

콜백 함수(Complete Function)

·       만약 콜백 함수를 인자로 설정하면, 움직임이 완료된 다음에 해당하는 함수가 실행됩니다.

·       이 콜백함수는 인자를 가질 수 없으나, this를 사용하면 움직임이 있었던 DOM 요소를 제어할 수 있습니다.

 

 

 

애니메이션의 기본 사용법

1단계	마크업을 통해 불러올 이미지의 경로와 사이즈를 지정하고,
2단계	투명도 및 좌표, 그리고 높이 등을 통해 움직임을 지정해줍니다.