[JavaScript] jQuery Effects(3) - Animate

jQuery의 animate 기능은 이전에 살펴봤던 hide/show, fade, slide와 같이

이미 정해진 움직임을 element에 부여하는 함수와는 다르게 

우리가 원하는대로 customize한 움직임을 element에 부여할 수 있다.

$(selector).animate({params}[,duration][,callback]);

animate의 기본적인 syntax는 위와 같다.

우선 필수적인 인자로 params라는 객체가 들어온다.

이 params는 animate될 수 있는 CSS 속성 객체가 들어오는데, 

CSS 속성은 반드시 single numeric value여야 한다.

예를들어 width, height, left와 같은 값은 animate될 수 있으나, 

background-color와 같은 non-numeric value는 객체안의 값이 될 수 없다.

만약 color를 animate하고 싶다면 jQuery Color plugin을 사용해야 한다.

이 포스팅에선 일단 넘어가고, 다음에 기회가 된다면 사용해보자.

위의 예시는 버튼 클릭 시 박스를 움직이는 예제이다.

주의할 점은 element의 위치를 이동시키기 위해서는 해당 elemnt의 CSS property중 position 값을 relative, fixed, absolute로 설정해주어야 한다.

animate안의 params 객체는 우리가 작성하는 css style 형식처럼 작성하면 된다.

이 코드는 현재 위치를 기반하여 left와 top을 100px로 이동시킨다.

하지만 절대적 위치로 이동시키는 것이기 때문에 단 한번만 움직이고 이후에는 작동하지 않는다.

만약 버튼을 누를 때 마다 움직이고 싶다면 다음과 같이 코드를 작성하면 된다.

코드를 보면 기존의 '100px'에서 '+=30px'로 변경된것을 볼 수 있다.

버튼을 누를때마다 기존 위치에서 left, top이 30씩 더해지며 box가 이동한다.

이는 절대적 위치가 아닌 현재 위치에 대해 relative한 위치로 이동시키는 방법이다.

또한 여러개의 animate 함수를 이용해 연속적인 움직임을 구현할 수도 있다.

See the Pen PVrENg by EBEL21 (@ebel21) on CodePen.

여러개의 animate를 나열하게 되면 마치 Queue처럼 순서대로 animate를 동작하게 된다.

이를 통해 좀더 복잡하고 다양한 움직임을 구사할 수 있는게 animate함수의 장점이다.