jQuery - .animate()

CSS 스타일을 이용해 많은 종류의 소스와 속성 값으로 어렵게 애니메이션을 제작해 왔다면 .animate() 메소드는 쉽게 제작할 수 있도록 설계되었습니다.

CSS 의 거의 모든 속성을 이용할 수 있으며 따라서 선택한 요소에 다양한 동작을 적용할 수 있습니다.

형식은 다음과 같습니다.

$( select ).animate(properties [, speed] [, easing] [, callback]);

매개변수에 대한 설명은 다음 표를 참고합니다.

매개변수	설 명
properties	필수 선택. 애니메이션에 적용될 CSS 속성과 값. 객체 배열로 지정하며 낙타 표기법으로 지정.
speed	선택 사항. 애니메이션 속도를 제어. 기본값: 400(밀리 초) slow: 천천히. 200(밀리 초) fast: 빠르게. 600(밀리 초) 밀리 초: 1000/1(초)를 지정
easing	선택 사항. 애니메이션 가속도를 제어. swing: 시작과 끝이 느리게 움직이지만 중간에는 빠르게 움직임.   기본값 linear: 일정한 속도로 움직임
callback	선택 사항. 콜백 함수는 작업이 완료된 후에 실행됨.

낙타 표기법

매개변수 properties 에는 CSS 객체를 지정합니다. 거의 모든 CSS 를 사용할 수 있지만 언더바(-)가 있는 CSS 는 낙타 표기법으로 변환해야 합니다.

예를 들어 padding-left 는 언더바 다음에 나오는 첫 단어를 대문자로 바꿔주고, 언더바는 제거하는 것입니다.

$( selecter ).animate({
  'paddingLeft': '10px',
  'paddingRight': '10px'
});

CSS 에서는 padding-right 이지만 낙타 표기법으로 paddingRight 가 되도록 해주어야 합니다. 그럼, border-bottom-width 는 어떻게 변환되어야 할까요? 마찬가지로 borderBottomWidth 가 되어야 하며, border-bottom-color 는 borderBottomColor 로, font-size 도 'fontSize: 16px' 의 형식으로 변환되어야 합니다.

$( selecter ).animate({
  'borderBottomWidth': '10px',
  'borderBottomColor': 'red'
});

단축 기능

매개변수 properties 에는 요소를 숨기거나 표시할 수 있는 단축 기능을 제공합니다. show(), hide(), toggle() 기능이 그것입니다. $().toggle().animate({'height': '100px'}); 와 같지만 각각의 속성에 문자열 "show", "hide", "toggle" 을 지정하면 요소의 표시 여부를 결정할 수 있습니다.

$( selecter ).animate({
  'width': '300px',
  'height': 'toggle',
  'opacity': 'toggle'
});

또는

$( selecter ).click(function(){
  $(this).toggle();
});

산술 기호

매개변수 properties 에 상대 값으로 +=, -= 와 같은 산술 기호를 넣을 수 있습니다. 이것은 현재의 값에 플러스(+)하거나 마이너스(-) 시켜 요소에 변화를 주는 것입니다.

$( selecter ).click(function(){
 $( selecter ).animate({
  'width': '+= 30px',
  'height': '+= 30px'
 });
});

이렇게 하면 클릭할 때마다 요소의 크기가 30px 만큼 플러스되어 점점 커지게 합니다.

요소의 위치를 조작하려면 CSS 의 position 이 relative, fixed, 또는 absolute 중 하나로 설정되어있어야 합니다. HTML 은 기본적으로 모든 태그들은 static 상태입니다. 따라서 position을 먼저 설정해주고, 위치를 조작합니다.

체이닝 애니메이션

온점(.)을 이용해 메서드에 메서드를 이어 붙이는 체이닝 방법을 사용하면 역동적인 애니메이션을 구현할 수 있습니다.

$( selecter ).click(function(){
 $( selecter ).animate({
  'width': '30px',
  'height': '30px'
 }, 3000)
 .animate({
  'width': '300px',
  'height': '100px'
 }, 2000)
 .animate({
  'width': '200px',
  'height': '30px'
 }, 3000);
});

여러 개의 애니메이션이 순서대로 움직이는데, 뚝뚝 끈기는 것이 아니라 유연하게 동작한다는 점입니다. 하나의 애니메이션이 끝나면 다음 애니메이션이 실행되며 그 과정이 부드럽게 이어지게 됩니다.

여러 개의 요소를 동시에 움직이게 하려면 어떻게 해야 할까요? 다음은 두 개의 요소가 작업이 끝나면 완료되었다는 확인 창을 띄웁니다.

$( selecter ).click(function(){
 var select01 = $("select1");
 var select02 = $("select2");

 select01.animate({
  'width': '30px',
  'height': '30px'
 }, 3000);

 select02.animate({
  'width': '30px',
  'height': '30px'
 }, 3000);


 $.when(select01, select02).then(function() {
   alert("끝났당!");
 });
});

애니메이션 반복

제이쿼리는 애니메이션을 반복 작업하는 메소드를 따로 제공하지 않습니다. 하지만 재귀호출 방법을 사용하면 구현은 간단합니다. 재귀호출은 함수인 자기 자신을 호출하는 것을 말합니다.

function use_animated() { 
  $("#use-nth").animate({ 
    height: "50%" 
  }, "slow")
  .animate({ 
    height: "90%" 
  }, "slow", use_animated); 
} 

use_animated();