jquery 애니메이션 애니메이션 효과 지침_jquery

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

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

// 하나의 애니메이션에 세 가지 유형의 효과를 동시에 적용
$("#go").click(function(){
$("#block").animate ({
너비: "90%",
높이: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 ); ;
animate( params, options )

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

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

$("#go1").click(function(){ $("#block1").animate( { width: "90%"} , { 대기열: false , 기간: 5000 } ) .animate( {fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000)) $("#go2").click(function (){ $( "#block2").animate( { width: "90%"}, 1000 ) .animate( {fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); );

stop( [clearQueue], [gotoEnd] )
지정된 요소에서 실행 중인 모든 애니메이션을 중지합니다.
큐에 실행 대기 중인 애니메이션이 있으면(clearQueue가 true로 설정되지 않은 경우) 즉시 실행됩니다.
clearQueue(Boolean): true로 설정하면 큐가 지워집니다. 애니메이션을 즉시 종료할 수 있습니다.
gotoEnd(부울): 현재 실행 중인 애니메이션을 즉시 완료하고 표시 및 숨기기의 원래 스타일을 재설정하고 콜백 함수를 호출하는 등의 작업을 수행합니다.
이동을 클릭한 후 중지를 클릭하면 애니메이션이 시작됩니다.

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

// 애니메이션 시작 $("#go").click(function(){ $(".block").animate({left: ' 200px'} , 5000); }); / / 버튼을 클릭하면 애니메이션이 중지됩니다. $("#stop").click(function(){ $(".block").stop(); }); 🎜>