제이쿼리 animate() 메서드

오늘은 animate() 메서드를 이용하여 선택한 요소에 대한 여러 모션을 적용할 수 있는 방법에 대해 알아보도록 하겠다. 예를 들어 특정 요소를 앞으로 이동시키거나 점점 커지게 하는 등 다양한 동작을 적용할 수 있다. 

 

animate 함수의 기본형은 아래와 같다. 

$("요소").animate({스타일 속성}, 적용시간, 가속도, 콜백함수)

여기서 스타일 속성이란 모션(애니메이션)으로 적용할 스타일 속성을 의미하고, 적용 시간이란 원하는 동작이 반응하는 데 소요되는 시간을 의미한다. 

 

예시로 jquery script를 보면 훨씬 더 이해가 빠를 것이다. 

 

 

<script>
$(function({
 $(".btn1").on("click", function(){
  $(".text1").animate({
  fontSize: "60px",
  marginLeft:"600px"
 },
 4000, 
 "linear",
 function(){
  alert("애니메이션 적용 완료");
 });
});
</script>

 

여기서는 btn1 이라는 요소를 클릭했을 시 text1을 class 이름으로 가지는 요소가 4초동안 오른쪽 방향으로 600px 만큼 이동하며 동시에 글자 크기도 60px 만큼 커진다. 

 

여기서 4000은 4초를 의미한다. 

또한 애니메이션이 종료되면 콜백함수를 호출하게 되고 여기서는 alert function이 콜백함수라고 할 수 있겠다.

 

즉 애니메이션 요소가 종료되면 alert 를 띄우면서 끝났다고 알려주는 간단한 script이다.