jQuery animation (스크립트 에니메이션) 효과 주기

jQuery 를 이용하여 animation (에니메이션) 효과를 주는 것은 jQuery 의 장점이라고 해야할까요? 아무튼 jQuery 는 기존의 자바스크립트를 이용하면 간단한 효과를 주더라도 코드가 길어지고 복잡해집니다. 그런데 이러한 스크립트 코드의 난해함과 복잡함을 싹 없애주는 jQuery 가 개인적으로 저는 더 좋습니다. 물론 javascript 를 사용안할 수는 없지만요.

 

아무튼 에니메이션 효과를 주고자 jQuery 를 이용해 보았습니다.

우선 기본적인 사용 방법은 아래와 같습니다. 아래의 내용은 http://api.jquery.com/animate/ 에 있는 내용 입니다.

Basic Usage

 

To animate any element, such as a simple image: (예제 이미를 에니메이션 하려면)

 

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"  style="position: relative; left: 10px;" />

 

( 여기 이미미지 태그가 바로 에니메이션 적용하는 부분이며 아이디 값으로 book 이라고 선언하였군요 )

 

 To animate the opacity, left offset, and height of the image simultaneously:
 (동시에 이미지의 투명도와 왼쪽 오프셋과 높이를 에니메이션하려면)

 

$('#clickme').click(function() {

  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });

});

 

 

위와 같이 animate 라고 쓰고 { } 안에 각 속성들이 콤마(,)로 구분되어 작성이 됩니다.
여기서는 투명도값을 0.25 로 만들고 좌표값을 50 증가시켜 우측으로 이동시킵니다.
높이는 toggle 로 되어있는데.. 이 값은 show 와 hide 가 번갈아 되도록 하는 자동 문자열? 이라고 생각하시면 됩니다.

그리고 이러한 에니메이션이 일어나는 시간을 5000(5초) 이라고 하였습니다.

따라서 위의 book.png 라는 이미지를 클릭할때마다 오른쪽으로 50씩 이동하고 높이값이 한번은 늘어났다가.. 다음 번에는 줄어드는 효과가 나타납니다.

 

 

에니메이션 효과 첫번째

 

 

에니메이션 효과 두번째

 

그리고  // Animation complete. 이라는 부분은 에니메이션이 끝나고 동작할 코드를 집어 넣는 부분인데요. 나중에 에니메이션을 하다보면 선언해주어야 할 변수값 세팅 등.. 반드시 필요하시게 될때 사용하시면 됩니다.

 

아무튼 jQuery 로 에니메이션 효과를 만드시고자 하는 분들께 조금 이나마 도움이 되었으면 좋겠습니다.