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

WBOY
풀어 주다: 2016-05-16 17:39:08
원래의
1383명이 탐색했습니다.

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 코드:

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


"> 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 코드:

코드 복사
코드는 다음과 같습니다.
jQuery 코드:
$("#go1").click(function(){
$("#block1").animate( { 너비: " 90%"}, { 대기열: false, 기간: 5000 } )
.animate( {fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
} );
$ ("#go2").click(function(){
$("#block2").animate( { 너비: "90%"}, 1000 )
.animate( { 글꼴 크기: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000)
})

설명
:
600밀리초 높이 및 투명도로 단락 전환

jQuery 코드
:


코드 복사
코드는 다음과 같습니다. 다음과 같습니다:
설명
:
500밀리초를 사용하여 단락을 왼쪽 50으로 이동하고 완전히 명확하게 표시합니다(투명도는 1)

jQuery 코드
:


코드 복사
코드는 다음과 같습니다.
관련 라벨:
원천:php.cn
이전 기사:jquery는 tr에서 제어 값을 가져오고 tr 구현을 작동합니다 idea_jquery 다음 기사:자바스크립트 array_javascript 스킬 활용
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
관련 주제
더>
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿