METHODS

Draft
  • account_tree
  • bug_report

animate()

설명

CSS 속성과 독자적인 값 설정 방식으로 요소에게 애니메이션 처리를 할 수 있다.

구현 형식

1

.animate(Objectproperties, Integerduration, Stringeasing, Functioncomplete)

CSS 속성과 독자적인 값 설정 방식으로 요소에게 애니메이션 처리를 할 수 있다.

매개 변수

Objectproperties필수

CSS 속성 명으로 된 Key와 그에 따른 원하는 값을 가진 객체로 지정한다. 가능한 CSS 속성은 아래의 추가 자료를 참고하길 바란다. 참고로  숫자로 설정 가능한 속성이어야 한다. 값 설정시 기본적으로 CSS에서 설정 가능한 방법으로 숫자를 지정하며 숫자가 아닌 "show", "hide", "toggle"를 지정할 수도 있다. show는 요소가 완전히 보일때까지, hide는 요소가 완전히 보이지 않을 때까지 애니메이션을 처리한다. toggleshowhide가 반복되는 애니메이션으로 처리할 수 있다.

만약에 상대적인 값으로 지정하고자 하는 경우에는 문자열로 -= 또는 +=를 이용한 방식(예: "-=100")으로 값을 지정한다.

CSS 속성이 아닌 jQuery에서 지원하는 scrollTopscrollLeft 속성도 별도로 존재한다.

Integerduration선택

애니메이션 지속 시간을 밀리초(Milliseconds)로 설정한다. 또는 미리 지정된 'slow','fast' 문자열 값으로 지정할 수도 있다. 이 경우 slow는 600 밀리초, fast는 200 밀리초로 동작한다.

Stringeasing선택

애니메이션의 속도 변화 값을 지정된 상수로 설정이 가능하다. 기본적으로 설정 가능한 내장된 값은 'swing', 'linear'가 있다. 기본 값인 'swing'은 천천히 빠르게, 'linear'는 일정한 속도로 애니메이션을 보여준다.

Functioncomplete선택

애니메이션이 완료되면 실행할 함수를 등록하여 사후 처리를 할 수 있다.

반환

jQueryjquery

jQuery 객체

구현 형식

2

.animate(Objectproperties, Objectoptions)

두 개의 인수로 애니메이션 처리할 대상을 정의한 객체와 애니메이션 설정을 갖는 객체를 인수로 갖는 방식이다.

매개 변수

Objectproperties필수

CSS 속성 명으로 된 Key와 그에 따른 원하는 값을 가진 객체로 지정한다. 가능한 CSS 속성은 아래의 추가 자료를 참고하길 바란다. 참고로  숫자로 설정 가능한 속성이어야 한다. 값 설정시 기본적으로 CSS에서 설정 가능한 방법으로 숫자를 지정하며 숫자가 아닌 "show", "hide", "toggle"를 지정할 수도 있다. show는 요소가 완전히 보일때까지, hide는 요소가 완전히 보이지 않을 때까지 애니메이션을 처리한다. toggleshowhide가 반복되는 애니메이션으로 처리할 수 있다.

만약에 상대적인 값으로 지정하고자 하는 경우에는 문자열로 -= 또는 +=를 이용한 방식(예: "-=100")으로 값을 지정한다.

CSS 속성이 아닌 jQuery에서 지원하는 scrollTopscrollLeft 속성도 별도로 존재한다.

Objectoptions선택

다음 속성을 대표적으로 사용할 수 있으며 더 상세한 내용은 아래의 기술 문서를 참조한다.

  • duration : 애니메이션 지속 시간을 밀리초로(Milliseconds) 정의, 기본 값은 400, slow, fast 키워드 지정 가능
  • easing : 애니메이션 진행 방식을 정의, 기본 값은 swing
  • queue : 애니메이션 적용 순서, false로 지정하면 동시에 적용, 기본 값은 true
  • specialEasing : 속성 별로 easing 값을 따로 지정 가능
  • step : 움직임이 발생할 때 마다 실행할 함수를 등록
  • progress: 애니메이션 진행율을 매개변수로 전달받아 처리하고자 할 때 함수를 등록
  • complete : 애니메이션이 종료 후 실행할 함수를 등록
  • start: 애니메이션 시작될 때 실행할 함수를 등록
  • done: 애니메이션이 완료될 때 실행할 함수를 등록(Promise 객체가 확인됨)
  • fail: 애니메이션이 완료되지 않았을 때 실행할 함수를 등록(Promise 객체가 거부됨)
  • always: 애니메이션이 완료되지 않고 끝나거나 중지될 때 실행할 함수를 등록(Promise 객체가 해결되거나 거부됨)

반환

jQueryjquery

jQuery 객체

예제

(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 속성

옵션 명타입기본 값설명전달 인자
durationstring 또는 number400애니메이션 지속 시간을 밀리초로(Milliseconds) 정의하며 'slow' 또는 'fast'로 지정한다. 
easingstringswing애니메이션 속도 변화를 지정하며 내장된 값은 'swing'과 'linear'가 있다. 'swing'은 천천히 시작하여 빠르게 진행후 천천히 종료한다. 
queueboolean 또는 stringtrue

대기열에 애니메이션을 배치할지 여부를 지정한다. false이면 애니메이션이 즉시 실행된다. jQuery 1.7 부터는 대기열 설정 값을 문자열로 가능하다. 사용자 지정 대기열 이름을 지정하면 애니메이션이 자동으로 실행되지 않는다. 이 경우 .dequeue("대기열 이름")으로 호출하여야 한다.

 
specialEasingPlain Object 속성별로 easing을 지정할 수 있도록 설정된 객체(예: { width: 'swing', height: 'linear' } 
stepFunction 애니메이션 요소의 각 애니메이션 속성에 대해 호출할 함수를 지정한다. 애니메이션 요소마다 호출되기에 성능에 문제가 발생할 수 있다. 애니메이션 초당 재생 프레임(FPS)수가 60을 지원하는 웹브라우저일 경우 초당 60번이 호출된다. Function( Number now, Tween tween )
progressFunction 애니메이션 속성의 수에 관계없이 애니메이션 각 단계 후에 호출되는 함수로 애니메이션 요소당 한번만 호출된다.Function( Promise animation, Number progress, Number remainingMs )
completeFunction   
startFunction   
doneFunction   
failFunction   
alwaysFunction