[jQuery] animate({});

//기본 문법(Syntax)
$(selector).animate({styles},speed,easing,callback);
//$('선택자').animate({property: value}, 지속시간, 가속/감속, callback);
//지속시간, 가감속, 콜백은 선택사항이다.

기본적으로 click(fucntion(){}); 안에 주로 쓰인다.

 

자바스크립트에서 click(fucntion(){});와 같은게,

document.querySelector('선택자').addEventListener('click', function(){ 여기 });

여기라고 쓴 곳 안에 animate 매서드가 들어가는 것과 비슷하다고 봐야겠다.

 

위를 보면 알 수 있듯이,

 

styles:

속성과 속성값이 들어간다.

예를 들면,

 

속성값이 숫자가 나오는 속성들은 대부분 사용할 수 있다. ( margin: '30px')

그러나 속성값이 문자열(String)은 사용될 수 없다. (backgroundColor: '#fff000', backgroundColor: 'yellow')

하지만, 속성값은 quote(따옴표 '' 혹은 "") 안에 쓰여야 한다.

 

animate란 말에서 알 수 있듯이 대상의 크기나 모양의 변화나 위치값의 변화(이동) 등을 나타낸다고 볼 수 있다.

단 예외적으로, 속성값이 show, hide, toggle 은 작동한다. (width: 'toggle')

 

speed:

기본값은 400 ms (0.4초) 이다.

ms는 적지 않는다. 숫자로만 표기한다. 300, 500, 1000, 3000 등...

"slow" 또는 "fast"로도 적을 수 있다.

 

easing:

기본값은 "swing"이다. 생략하면 "swing"(앞과 끝은 천천히, 중간은 빠르게)이다.

"linear"(일정한속도).

이 두가지가 기본이고 다이지만,

외부플러그인을 사용하면 다양하게 사용가능하다. 

 

jQuery UI CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

출처: cdnjs.com/libraries/jqueryui

jqueryui - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

그리고 외부플러그인 jQuery-ui의 가속도 속성값을 정리해 둔 사이트가 있으니, 참고해서 넣으면 되겠다.

링크: api.jqueryui.com/resources/easing-comparison.html

jQuery UI Effects - Easing Comparison demo

callback:

애니메이션이 끝난 후 함수가 호출된다.

예제를 보자.

 

See the Pen animate({}) by builderous (@nyjchoi) on CodePen.

 

자세한 내용은 W3School을 참조해도 좋습니다.

링크: https://www.w3schools.com/JQuery/eff_animate.asp

jQuery animate() Method