Jquery 사용자 정의 애니메이션 개요 및 example_jquery

animate(params, options) 반환값:jQuery
개요
사용자 정의 애니메이션을 만드는 데 사용되는 함수입니다.
이 기능의 핵심은 애니메이션 형식과 결과 스타일 속성 개체를 지정하는 것입니다. 이 개체의 각 속성은 변경 가능한 스타일 속성(예: "높이", "상단" 또는 "불투명도")을 나타냅니다. 참고: 지정된 모든 속성은 margin-left 대신 marginLeft와 같은 낙타 형식이어야 합니다.
각 속성의 값은 애니메이션이 끝날 때 이 스타일 속성의 길이를 나타냅니다. 숫자 값인 경우 스타일 속성은 현재 값에서 지정된 값으로 그라데이션됩니다. "hide", "show" 또는 "toggle"과 같은 문자열 값이 사용되는 경우 해당 속성에 대해 기본 애니메이션 양식이 호출됩니다.
jQuery 1.2에서는 em과 % 단위를 사용할 수 있습니다. 또한 jQuery 1.2에서는 속성 값 앞에 "=" 또는 "-="를 지정하여 요소가 서로 상대적으로 이동하도록 할 수 있습니다.

Parameters
paramsOptions
스타일 속성과 그 값을 애니메이션 속성으로 포함하는 집합과 최종 값 ​​
optionsOptions
애니메이션 옵션을 포함하는 집합 값의 컬렉션입니다.

옵션
durationString,Number
(기본값: "normal") 미리 결정된 세 가지 속도("느림", "보통" 또는 "빠름") 중 하나의 문자열 ) 또는 애니메이션 지속 시간을 나타내는 밀리초 값(예: 1000)
easingString
(기본값: "swing") 사용할 삭제 효과의 이름(플러그인 지원 필요) 기본적으로 jQuery가 제공합니다. "linear" 및 "swing".
completeFunction
애니메이션이 완료될 때 실행되는 함수
stepCallback
queueBoolean
(기본값: true) 이를 false로 설정하면 이 애니메이션이 애니메이션에 들어가지 않습니다. queue (jQuery New in 1.2)

예
설명:
첫 번째 버튼을 누른 후 대기열에 없는 애니메이션이 표시됩니다. div가 90%로 확장되면 글꼴도 증가합니다. 글꼴이 변경되면 테두리 애니메이션이 시작됩니다.
HTML 코드:

코드 복사 코드는 다음과 같습니다.

» 애니메이트 블록1
» 애니메이트 블록2 "> Block1

Block2

jQuery 코드:
$("#go1").click(function(){
$("# block1") .animate( { 너비: "90%"}, { 대기열: false, 기간: 5000 } )
.animate( { 글꼴 크기: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
});
$("#go2").click(function(){
$("#block2").animate( { 너비: "90%"} , 1000 )
.animate( { 글꼴 크기: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000)
}); 🎜>설명
:
두 번째 버튼을 누르면 전통적인 체인 애니메이션이 됩니다. 즉, 이전 애니메이션이 완료될 때까지 다음 애니메이션이 시작되지 않습니다.

HTML 코드:

코드 복사

코드는 다음과 같습니다. » 블록1 애니메이션» 블록2 애니메이션

블록1

< div id="block2" >Block2

jQuery 코드: