.animate (properties [, duration] [, easing] [, complete]) > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

.animate (properties [, duration] [, easing] [, complete]) 정보

jQuery .animate (properties [, duration] [, easing] [, complete])

본문

.animate (properties [, duration] [, easing] [, complete])

설명 : CSS 속성 세트의 맞춤 애니메이션을 수행합니다.



이 .animate()메서드를 사용하면 모든 숫자의 CSS 속성에 애니메이션 효과를 만들 수 있습니다. 유일한 필수 매개 변수는 CSS 속성의 일반 객체입니다. 이 객체는 .css()속성 범위가 더 제한적이라는 점을 제외 하면 메서드에 보낼 수있는 객체와 비슷합니다 .


애니메이션 속성 및 값


모든 애니메이션 속성은 아래 명시된 경우를 제외하고 단일 숫자 값 으로 애니메이션되어야 합니다. jQuery를 기본 기능을 이용하여 애니메이션 수없는 숫자가 아닌 대부분의 특성 (예를 들어 width, height또는 left애니메이션 수 있지만 background-color않는 수 없다 jQuery.Color의 플러그인이 사용된다). 속성 값은 달리 지정되지 않는 한 픽셀 수로 처리됩니다. 해당 단위 em및을 %지정할 수 있습니다.


스타일 속성 외에도 scrollTop및과 같은 비 스타일 속성과 scrollLeft사용자 정의 속성이 애니메이션으로 표시 될 수 있습니다.


속기 CSS 속성 (예 : 글꼴, 배경, 테두리)은 완전히 지원되지 않습니다. 예를 들어, 렌더링 된 테두리 너비에 애니메이션을 적용하려면 적어도 "자동"이외의 테두리 스타일과 테두리 너비를 미리 설정해야합니다. 또는 글꼴 크기에 애니메이션 효과를 적용하려면 간단히 말고 fontSizeCSS를 사용 하십시오 .'font-size''font'


수치뿐만 아니라, 각각의 속성은 문자열을 취할 수 'show', 'hide'및 'toggle'. 이 단축키를 사용하면 요소의 표시 유형을 고려한 애니메이션을 사용자 정의 숨김 및 표시 할 수 있습니다. jQuery에 내장 된 토글 상태 추적을 사용하려면 'toggle'키워드가 지속적으로 애니메이션 속성의 값으로 지정되어야합니다.


애니메이션 속성은 상대적 일 수도 있습니다. 값에 선행 +=또는 -=일련의 문자 가 제공된 경우 목표 값은 속성의 현재 값에서 주어진 수를 더하거나 뺍니다.


참고 같은 애니메이션 속기 방법 달리 .slideDown()및 .fadeIn()상기 .animate()방법 않는 하지 효과의 일부 숨겨진 요소 보이게. 예를 들어, 주어진 $( "someElement" ).hide().animate({height: "20px"}, 500)애니메이션은 실행되지만 요소는 숨겨진 상태로 유지 됩니다.


지속


기간은 밀리 초 단위로 표시됩니다. 값이 높을수록 느린 애니메이션이 아니라 빠른 애니메이션이 표시됩니다. 기본 지속 시간은 400밀리 초입니다. 문자열 'fast'및 'slow'은 각각 지속 기간 200및 600밀리 초 를 나타 내기 위해 제공 될 수 있습니다 .


콜백 함수


공급의 경우에는 start, step, progress, complete, done, fail, 및 always콜백이 호출되어 당 요소 기준; this애니메이션중인 DOM 요소로 설정됩니다. 집합에 요소가 없으면 콜백이 호출되지 않습니다. 여러 요소에 애니메이션이 적용되면 콜백은 일치 된 요소마다 한 번 실행되며 애니메이션 전체에 대해서는 한 번만 실행되지 않습니다. 이 .promise()메서드를 사용하면 0 요소를 포함하여 애니메이션 크기의 애니메이션 세트에 대해 한 번 실행되는 콜백을 첨부 할 수있는 약속을 얻을 수 있습니다.


기본 사용법


간단한 이미지와 같은 요소를 애니메이션으로 적용하려면 다음을 수행하십시오.



<div id="clickme">

  Click here

</div>

<img id="book" src="book.png" alt="" width="100" height="123"

  style="position: relative; left: 10px;">

이미지의 불투명도, 왼쪽 오프셋 및 높이를 동시에 애니메이트하려면 :



$( "#clickme" ).click(function() {

  $( "#book" ).animate({

    opacity: 0.25,

    left: "+=50",

    height: "toggle"

  }, 5000, function() {

    // Animation complete.

  });

});


height속성 의 대상 값은 입니다 'toggle'. 이전에 이미지가 표시 되었기 때문에 애니메이션은 높이를 0으로 축소하여 숨 깁니다. 그런 다음 두 번째 클릭으로 전환됩니다.



opacity이미지는 목표 값에서 이미 때문에,이 특성은 두 번째 클릭하여 애니메이션되지 않는다. 목표 값 left은 상대 값이므로이 두 번째 애니메이션 중에 이미지가 오른쪽으로 더 멀리 이동합니다.


방향 특성 ( top, right, bottom,는 left자신의 경우) 요소에 아무런 식별 할 수있는 영향을주지  position스타일의 숙박 시설이다 static는 기본적으로이다.


참고 : jQuery를 UI의 프로젝트는 확장 .animate()색상이 애니메이션을 일부 숫자가 아닌 스타일은 수 있도록하여 방법을. 이 프로젝트에는 개별 속성이 아닌 CSS 클래스를 통해 애니메이션을 지정하는 메커니즘도 포함되어 있습니다.


참고 : 오버플로로 인해 요소의 내용이 보이는 높이 또는 너비가 0px 인 요소를 애니메이션하려는 경우 jQuery는 애니메이션 중에이 오버플로를 잘라낼 수 있습니다. 그러나 숨겨진 원본 요소의 치수를 고정하면 애니메이션이 원활하게 실행되도록 할 수 있습니다. clearfix은 자동으로 수동으로 설정할 필요없이 기본 요소의 크기를 해결하는 데 사용할 수 있습니다.


단계 기능


두 번째 버전은 애니메이션의 각 단계에서 시작되는 콜백 함수 인 옵션 을 .animate()제공합니다 step. 이 함수는 사용자 정의 애니메이션 유형을 활성화하거나 발생하는 애니메이션을 변경하는 데 유용합니다. 두 개의 인수 ( nowand fx)를 받아들이고 this애니메이션으로 DOM 요소로 설정됩니다.


now: 각 단계에서 애니메이션으로 표시되는 속성의 숫자 값

fx: 애니메이션 요소 및 애니메이션 속성의 첫 번째 및 마지막 값과 jQuery.fx같은 여러 속성과 elem애니메이션을 적용 할 속성에 대한 여러 가지 속성이 포함 된 프로토 타입 개체에 대한 참조 입니다.startendprop

이 step함수는 각 애니메이션 요소의 애니메이션 속성마다 호출됩니다. 예를 들어 두 개의 목록 항목이있는 경우 step함수는 애니메이션의 각 단계에서 네 번 발생합니다.


$( "li" ).animate({

  opacity: .5,

  height: "50%"

}, {

  step: function( now, fx ) {

    var data = fx.elem.id + " " + fx.prop + ": " + now;

    $( "body" ).append( "<div>" + data + "</div>" );

  }

});

완화


의 나머지 매개 변수는 .animate()사용할 여유 함수를 명명하는 문자열입니다. 이징 함수는 애니메이션 내의 다른 지점에서 애니메이션이 진행되는 속도를 지정합니다. jQuery 라이브러리의 유일한 구현 구현은 호출 된 기본값과 호출 swing되는 일정한 속도로 진행되는 구현 linear입니다. 더 많은 easing 함수는 플러그인, 특히 jQuery UI suite를 사용하여 사용할 수 있습니다 .


속성 별 완화


jQuery 버전 1.4부터는 단일 .animate()호출 내에서 속성 별 이징 함수를 설정할 수 있습니다 . 첫 번째 버전의 .animate()각 속성은 값으로 배열을 사용할 수 있습니다. 배열의 첫 번째 멤버는 CSS 속성이고 두 번째 멤버는 easing 함수입니다. 속성 별 이징 함수가 특정 속성에 대해 정의되지 않은 경우 .animate()메서드의 선택적 easing 인수 값을 사용합니다 . easing 인수가 정의되어 있지 않으면 기본 swing함수가 사용됩니다.


예를 들어 swing여유 함수를 사용하여 너비와 높이를 동시에 애니메이션화하고 여유 함수를 사용하여 불투명도를 애니메이션화하려면 linear:


$( "#clickme" ).click(function() {

  $( "#book" ).animate({

    width: [ "toggle", "swing" ],

    height: [ "toggle", "swing" ],

    opacity: "toggle"

  }, 5000, "linear", function() {

    $( this ).after( "<div>Animation complete.</div>" );

  });

});

두 번째 버전 .animate()에서는 options 객체가 specialEasing속성을 포함 할 수 있습니다.이 속성 자체는 CSS 속성 및 해당 easing 함수의 객체입니다. 예를 들어, linear여유 함수를 사용하여 너비 와 여유 함수를 사용하여 높이 를 동시에 애니메이션하려면 easeOutBounce:


$( "#clickme" ).click(function() {

  $( "#book" ).animate({

    width: "toggle",

    height: "toggle"

  }, {

    duration: 5000,

    specialEasing: {

      width: "linear",

      height: "easeOutBounce"

    },

    complete: function() {

      $( this ).after( "<div>Animation complete.</div>" );

    }

  });

});

앞서 언급했듯이 easeOutBounce함수 에는 플러그인이 필요 합니다.

추천
0

댓글 0개

전체 5,352
개발자팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT