제이쿼리(jQuery)를 이용해 원하는 엘리먼트를 간단하게 상대좌표 또는 절대좌표로 서서히 또는 빠르게 이동시킬 수 있습니다. 이 때 사용하는 메서드는 animate()입니다.
# animate()를 이용한 이동의 특징
- 단순히 문서객체 또는 요소를 이동시키기 위해서라면 아래 방법들도 있습니다. i. offset() 메소드 ii. CSS에서 top, left, right, bottom 속성을 사용하여 이동
하지만 위 방법들은 단순히 순간적으로 이동시키는 것뿐 서서히 또는 빠르게 이동시키는 효과를 주지는 않습니다. 이런 효과를 위해서 가장 간단히 할 수 있는 방법이 animate() 메소드인 것입니다.
(그림) 메인페이지의 이동하는 갤러리입니다. 우측으로 서서히 움직이는 효과는 animate() 메소드를 사용하였습니다.
# animate() 사용방법
animate() 메소드의 사용방법은 아래와 같습니다.
$('이동할 요소').animate({이동방향: "이동값"}, 이동속도, 이동효과);
animate()의 가장 큰 특징중 하나는 원하는 좌표 및 위치로 절대좌표 또는 상대좌표로 이동이 가능하다는 것입니다. 쉽게말해서... i. 절대좌표 이동: 좌표값에 해당하는 위치로 이동 ii. 상대좌표 이동: 현재 위치를 기준으로 양(+) 도는 음(-)의 값만큼 상하좌우 이동
그리고, 맨 마지막 이동효과는 선택옵션으로 아래 두가지 중에서 선택이 가능합니다. i. swing(기본값, default) ii. linear swing과 linear의 차이점은 linear의 경우 움직이는 동안 속도가 일정한 반면 swing은 끝부분의 경우 약간 늦게 이동합니다.