Jquery[제이쿼리] animate()메서드 배우기

안녕하세요~ 제이쿼리공장장 주니주니 입니다.

오늘은 제이쿼리[jquery] animate()메서드를 배워보겠습니다. 

이렇게 준비해보았습니다.!^ㅡ^/

그림파일 경로는 이렇게 되어있습니다.

실행화면입니다.
그림은 아무거나 맘에드시는걸로 하시면된답니다.

=============================== 
$('.img1').on("click",function(){
   $('.img1').animate({"width":"200px","height":"50px"}).animate({"height":"200px"});
  });
=============================== 
class img1가 click되면 <== 검정색1번 그림입니다.
class img1의 css부분을 animate()메서드로 width는 200,height는 50으로 수정하고
그다음 다시 height를 200으로 수정하라는 뜻입니다.

※animate()란 css를 수정하여 애니메이션 효과를 만드는 메서드라고 생각하시면된답니다.
사용형식은 animate(properties [,duration][,easing][,complete]) 이런 형식으로 되어있습니다.
[ ]<==이렇게 묶여있는 부분은 필요에따라 사용하시면된답니다.
properties 부분은 변경할 css부분이라고 생각하시면된답니다.
duration 부분은 지속 시간 즉 애니메이션효과의 시간을 지정하는 부분입니다.
기본값은 400입니다.0.4초네요^ㅡ^
easing 부분은 애니메이션이 실행될때 효과를 주는 부분입니다.
여러가지가 있지만 기본적으로는 linear / swing 두가지가 있습니다.
complete 부분은 애니메이션이 실행완료후 어떤작업을 한것인지를 나타내는부분입니다.

다사용 하는 경우 
=============================== 
animate({"height":"200px"},1500,"swing",function(){
    alert("animate css변경완료");
   });
=============================== 
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
이런식으로 사용하면된답니다.

잘모르겠다는 분은 http://api.jquery.com/animate 여기를 참조하세요.

실행한뒤 첫번째 검정이미지를 클릭하면 가로부터 늘어나고

그뒤 세로부분이 증가된답니다.!

두번째 하늘색그림도 첫번째 그림이랑 똑같은 크기로 변경되지만
1.5초만에 애니메이션 효과가 끝나도록 하였고
효과는 swing, 그리고 애니메이션이 완료된뒤에는
alert()메서드를 사용하여 "animate css변경완료" 라는 문구를 찍도록 하였습니다.

1.5초만에 가로가 증가하고

1.5만에 세로가 증가하여 완료된뒤 경고창메시지가 뜨는 모습입니다.!

오늘은 제이쿼리[jquery] animate()메서드를 배워보았습니다.
그럼 다음에또만나요~