순수 JavaScript 로만 동적 구현을 하던 과거의 개발자들에게
많은 충격을 주었던 jQuery
그 중에서도 animate() 메서드는 웹 개발자가 jQuery 의 필요성을 절감할 수 밖에 없도록 만들었다고 한다.

---

---

사용자 지정 시각적 효과

메서드	설명
animate( )	사용자 지정 효과 생성

• $(selector).animate(properties);
• $(selector).animate(properties, duration);
• $(selector).animate(properties, duration, easing);
• $(selector).animate(properties, duration, easing, complete);
• $(selector).animate(properties, options);

• CSS 속성 - animate 메서드가 실행된 후 최종적으로 변할 스타일 속성

• 옵션 - duration, easing, complete, queue 등

---

애니메이션 큐

• jQuery 효과 메서드는 애니메이션 큐(Queue)에 계속 누적
  • 애니메이션 큐는 시각적 효과가 적용된 HTML 요소들에 개별적으로 생성된다.
• 각각의 animate() 메서드 들이 FIFO(선입선출) 방식으로 진행된다.

$("#box").animate({ left: "+=100" }, 2000)

1. 애니메이션 큐 내용 제거

메서드	설명
clearQueue( )	애니메이션 큐에 쌓여있는 효과 제거

• $(selector).clearQueue( );

2. 애니메이션 정지

메서드	설명
stop( )	현재 진행 중인 효과를 정지

• $(selector).stop( );
• $(selector).stop(clearQueue);
• $(selector).stop(clearQueue, goToEnd);

• clearQueue
  : clearQueue 메서드를 실행하는 것과 같은 효과 (기본값: false)

• goToEnd
  : 지정한 최종 형태에서 멈춤 (기본값: false)

3. 애니메이션 지연

메서드	설명
delay( )	큐에서 후속 항목들의 실행을 지연시키도록 타이머 설정

• $(selector).delay(duration);

• duration - 밀리초 단위로 큐에 있는 애니메이션을 잠시 중지시킬 시간

---

중요성에 비해 내용이 상당히 부실한 이유는
정리한 파일을 그만 다른 컴퓨터에 두고 와버렸기 때문이다..
나중에 내용을 보충하겠다!