jQuery 사용자 정의 이펙트 .animate() 메소드 정리

제이쿼리 .animate() 메소드는 CSS 속성을 자유롭게 조정하며 애니메이션 효과를 구현할 수 있는 강력한 도구입니다. 위치, 크기, 투명도 등 다양한 속성에 적용할 수 있으며 콜백, 속도 설정, 체이닝도 지원합니다.

---

.animate() 메소드란?

.animate()는 CSS 속성의 값을 애니메이션 효과로 자연스럽게 변화시키는 제이쿼리의 고급 이펙트 메소드입니다.

기본 제공되는 .fadeIn()이나 .slideDown()보다 더 유연하고 창의적인 효과 구현이 가능합니다.

---

기본 문법

$(선택자).animate(속성, [지속시간], [이징(easing)], [콜백]);

• 속성: 애니메이션으로 변경할 CSS 속성을 객체로 전달
• 지속시간: “slow”, “fast”, 숫자(ms)
• easing: "swing"(기본), "linear"
• 콜백: 애니메이션이 끝난 후 실행할 함수

---

기본 예제

$("#animateBtn").on("click", function() {
  $("#divBox").animate(
    {
      left: "+=100",
      opacity: 0.5
    },
    500,
    function () {
      $("#text").html("애니메이션 완료!");
    }
  );
});

---

미리 정의된 값

• "show": 보이기
• "hide": 숨기기
• "toggle": 보임/숨김 전환

$("#animateBtn").on("click", function() {
  $("#divBox").animate({
    height: "toggle"
  });
});

---

지원되는 CSS 속성

• 위치: top, left, right, bottom
• 크기: width, height, maxHeight, minWidth
• 여백·패딩: margin, padding, marginLeft, …
• 텍스트: fontSize, letterSpacing, lineHeight, …

$("#animateBtn").on("click", function() {
  $("#divBox").animate({
    width: "400px",
    height: "200px",
    marginLeft: "50px",
    opacity: 0.7
  }, 1000);
});

---

시간당 속도 함수 (easing)

옵션

• "linear": 일정한 속도
• "swing": 초반/후반은 느리고 중간은 빠름 (기본값)

$("#divBox").mouseenter(function() {
  $(this).stop().animate({ width: "300px" }, 1000, "linear");
});

$("#divBox").mouseleave(function() {
  $(this).stop().animate({ width: "100px" }, 1000, "swing");
});

---

콜백 함수 사용

$("#animateBtn").on("click", function() {
  $("#divBox").animate({ left: "+=200" }, 500, function() {
    alert("애니메이션이 완료되었습니다!");
  });
});

• 콜백 함수는 애니메이션 종료 후 자동 실행

---

체이닝 애니메이션

여러 .animate()를 연결하면 순차적으로 실행됩니다.

$("#animateBtn").on("click", function() {
  $("#divBox")
    .animate({ height: "300px" }, 1000)
    .animate({ width: "300px" }, 1000)
    .animate({ left: "+=100" }, 1000)
    .animate({ opacity: 0.5 }, 1000);
});

---

질문 정리

animate()에서 CSS 속성은 어떤 형식으로 써야 하나요?

→ marginLeft, fontSize 등 camelCase 형식으로 작성해야 합니다.

속성 값에 "+=100" 같은 문법은 무엇인가요?

→ 현재 위치 또는 값에서 상대적으로 변화시킬 수 있는 연산입니다.

.fadeIn() 같은 기본 메소드보다 좋은 점은?

→ .animate()는 다양한 속성을 동시에 제어할 수 있어 더 정교한 효과 구현이 가능합니다.

---

활용 팁

• stop()과 함께 사용하면 중복 애니메이션 방지
• delay()를 넣어 애니메이션 간 시간차 연출
• easing 조합으로 속도 곡선 최적화
• toggle, show, hide 값을 속성에 넣어 효과 대체 가능