jQuery w3schools 한글판 강좌35 - jQuery 효과 -애니메이션(움직임동작)

jQuery animate() 메소드를 이용하면 커스텀(여러분의 자체제작) 애니메이션을 만들수 있습니다.

jQuery 애니메이션 - animate()메소드

jQuery animate() 메소드는 커스텀 애니메이션을 제작에 사용됩니다.

문법:

필수 매개변수인 params 은 CSS 특성의 움직임을 정의합니다.

옵션인 speed 매개변수는 애니메이션효과의 발현시간을 지정하며,  

그것은 다음의 값을 가집니다: "slow", "fast", 또는 milliseconds.

옵션인 callback 매개변수는 애니메이션이 완료되면 실행되는 함수 입니다.

다음 예는 간단한 animate() 메소드의 사용을 보여주며, 

<div> 요소를 left속성이 250px이 될때까지 우측으로 옮겨줍니다 :

Example

$("button").click(function(){
    $("div").animate({left: '250px'});
});  

모든 HTML 요소들은 static position을 기본값으로 가집니다. 그래서 움직일수가 없습니다.
위치를 조절하려면, 먼저 요소의 CSS position 특성을 relative, fixed, 또는 absolute로 지정해야 함을
명심하십시오