[jQuery] 애니메이션 .stop() .animate()

문법

$('선택자').animate({속성:'값'}, 시간, 가속도함수, 콜백함수);
// 속도함수와 콜백함수는 생략 가능하다.

*콜백 함수를 이용하면 모션이 끝난 바로 그 시점에 새로운 모션이나 특정 기능을 이어서 실행 시킬 수 있다.

---

jQuery 가속도 함수를 사용하려면 jQuery UI가 필요하다.

<script src="https://code.jquery.com/ui/1.13.0-rc.3/jquery-ui.min.js"></script>

 

https://releases.jquery.com/ui/

jQuery UI – All Versions | jQuery CDN

*CDN 다운받는 원리는 [jQuery] CDN과 비슷하다.

 

UI 스크립트가 없는 상태에서 jQuery Easing 함수를 사용하게 되면, 아래와 같은 에러가 발생한다.

---

Q. 가속도 함수는 어디서 확인할 수 있나요?

https://easings.net/

Easing Functions Cheat Sheet

 

그래프를 봐도 감이 잘 안잡히는데요...

 

https://jqueryui.com/

jQuery UI

0. jQuery UI 사이트에 들어간다.

1. "ctrl + f" 단어 검색으로 "Easing"을 찾아서 클릭한다.

 

2. API documentation를 클릭한다.

 

3. 스크롤을 내리면 속도를 비교할수 있는 컨텐츠가 있다.

https://api.jqueryui.com/easings/

Easings | jQuery UI API Documentation

---

[주의] animate는 수치가 바뀌는 것만 사용가능하다.

예를 들어 font-size: 16px -> 40px으로 변경 (수치니까 가능)

background: pink -> lightblue로 변경 (수치가 아니기 때문에 불가능)

 

 

[해결방법]

이 또한 jQuery UI 스크립트를 연결하는 것이다. 

(색을 완전히 인식하지는 못하는 듯하다. lightblue와 rgb 컬러가 적용이 되지 않았다.)

---

.stop() 모션의 중첩 끊어주기

$('선택자').stop().animate({속성: '값'}, 시간, 속도함수, 콜백함수);
// stop()은 .animate()메서드 앞에 추가한다.
// stop()의 값은 Boolean이고, 기본 값은 true이다.
// 속도함수와 콜백함수는 생략 가능하다.

.animate는 선택한 요소에 마우스를 빠르게 올렸다 내리기를 반복하면 반복한 횟수만큼 모션이 중첩해서 계속 실행되는 것을 확인할 수 있다. 이처럼 반복되는 모션의 중첩을 끊어주기 위한 구문이 .stop() 메서드이다.

 

 

---

[공부좌표]

jQuery 04 [ animate 메서드 ] jQuery 애니메이트 메서드, 애니메이션 적용하기