(1) 버튼을 클릭할 때 마다 애니메이션 동작이 발생한다. 애니메이션 대상 속성은 'border-radius', 'left', 'width', 'height'이며 1초 동안 동작이 발생한다. 애니메이션이 완료된 후 세번째 인수에 의해서 핸들러로 등록된 함수가 수행되어 요소 내에 'OK'라는 텍스트를 삽입한다. easing 인수는 생략되었다.(2) 두번째 인수를 객체로 지정하는 방식으로 사용하는 샘플 코드(3) queue 옵션을 이용하여 애니에이션 순서를 정할 수 있다.
기술 문서
사용 가능한 속성
backgroundPositionX
backgroundPositionY
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
opacity
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
설정 가능한 options 속성
옵션 명
타입
기본 값
설명
전달 인자
duration
string 또는 number
400
애니메이션 지속 시간을 밀리초로(Milliseconds) 정의하며 'slow' 또는 'fast'로 지정한다.
easing
string
swing
애니메이션 속도 변화를 지정하며 내장된 값은 'swing'과 'linear'가 있다. 'swing'은 천천히 시작하여 빠르게 진행후 천천히 종료한다.
queue
boolean 또는 string
true
대기열에 애니메이션을 배치할지 여부를 지정한다. false이면 애니메이션이 즉시 실행된다. jQuery 1.7 부터는 대기열 설정 값을 문자열로 가능하다. 사용자 지정 대기열 이름을 지정하면 애니메이션이 자동으로 실행되지 않는다. 이 경우 .dequeue("대기열 이름")으로 호출하여야 한다.
specialEasing
Plain Object
속성별로 easing을 지정할 수 있도록 설정된 객체(예: { width: 'swing', height: 'linear' }
step
Function
애니메이션 요소의 각 애니메이션 속성에 대해 호출할 함수를 지정한다. 애니메이션 요소마다 호출되기에 성능에 문제가 발생할 수 있다. 애니메이션 초당 재생 프레임(FPS)수가 60을 지원하는 웹브라우저일 경우 초당 60번이 호출된다.
Function( Number now, Tween tween )
progress
Function
애니메이션 속성의 수에 관계없이 애니메이션 각 단계 후에 호출되는 함수로 애니메이션 요소당 한번만 호출된다.
Function( Promise animation, Number progress, Number remainingMs )