jQuery 이펙트(Effects) - animate() 애니메이션

다른 이펙트보다 더 동적인 움직임을 표현할 수 있습니다.

animate의 구문은 다음과 같습니다.

$(selector).animate({params},speed,callback);
// {params} 에 들어가는 것은 해당 요소를 꾸미는 것입니다. CSS

일단 어떤 동작을 하는지 보기 위해서 머리(head) 부분에 다음과 같이 입력합니다.

몸뚱아리(body)를 꾸며야 동작을 하는걸 볼수 있겠죠?

폭탄 입니다.

버튼을 누르게 되면 처음에 있던 자리에서 왼쪽으로 350픽셀만큼 이동합니다.

그럼 조금 더 다른 것을 해보겠습니다. head에서 조금만 변경합니다.

$("div").animate({left:'350px'});
// 위처럼 되어 있는 곳을 아래와 같이 바꿉니다.
$("div").animate(left:'350px'},height:'150px', width:'150px');

바꾸기를 완료했다면 저장하고 웹 브라우저를 통해 확인합니다.

왼쪽으로 이동하는 것은 동일합니다.

하지만 div 박스가 커지는 것을 볼수 있습니다.

더 확실하게 보고 싶다면 위쪽에 150을 200 아니 더 크게 바꾸어 보세요.

또 다른 animate효과를 보겠습니다. 역시나 머리만 조금 손질합니다.

$("div").animate(left:'350px'},height:'150px', width:'150px');
// 위 내용을 아래처럼 변신
$("div").animate(left:'350px'},height:'+=50px', width:'+=150px');

+= 이 추가되었습니다.

이것의 버튼을 눌러보면 바로 위에 동작한 것과 같습니다.

하지만 한번 더 누르면 이동은 하지 않고 객체의 크기가 50만큼 자랍니다.

버튼을 누를때마다 커지는 것은 계속 됩니다. 콩나물처럼 쑥쑥 자라죠.

그럼 이제 좀 다양한 효과를 줘보겠습니다.

저장을 하고 웹브라우저에서 버튼을 눌러보면 아래로 늘어났다가 옆으로 늘어나고 위쪽으로 줄어들고 왼쪽으로 줄어들어 원래의 크키로 돌아오는 것을 볼수 있습니다.