jQuery의 animate() 메서드는 지정한 CSS 속성에 사용자 정의 애니메이션을 적용합니다. 이 메서드는 여러 인수를 받을 수 있는데, 첫 번째 인수는 변경할 CSS 속성을 담은 객체이며, 두 번째 인수는 지속 시간(duration)이나 콜백 함수 같은 다양한 옵션을 설정하는 데 사용됩니다.
animate()에는 매우 다양한 옵션이 존재하지만, 이 글에서는 입문자를 위한 기본 내용만 다룹니다. jQuery animate의 문법과 예제 코드를 살펴보고, 실제로 animate()를 활용해 <div> 요소를 확장하는 방법까지 알아보겠습니다.
jQuery animate()를 사용해야 하는 이유
jQuery animate()의 활용 사례는 무궁무진합니다. 간단히 말해, 프런트엔드에서 애니메이션이 필요한 순간이라면 언제든 이 메서드를 사용할 수 있습니다. 이 메서드는 동적이면서도 복잡한 애니메이션 구현을 손쉽게 가능하게 해줍니다.
애니메이션은 이제 프런트엔드 개발에서 표준적인 관행이 되었습니다. animate()를 충분히 연습하면 프로젝트 프런트엔드에 애니메이션을 금방 적용할 수 있을 것입니다. 그럼 먼저 문법부터 살펴보겠습니다.
jQuery animate() 문법
앞서 잠깐 언급했듯이, animate()는 CSS 객체를 인수로 받습니다. 이 객체는 선택한 CSS 속성들의 새로운 값을 담고 있습니다. 모범 사례로는, 스타일시트에 이미 정의되어 있는 요소에만 animate()를 사용하는 것이 좋습니다.
모든 jQuery 메서드와 마찬가지로 animate()도 선택된 요소에 연결해서 사용해야 합니다. 이후 animate()를 호출하고, 원하는 최종 모양의 값으로 이루어진 CSS 속성 객체를 전달하면 됩니다. 여기서 중요한 점 하나! animate()는 오직 숫자형 값으로 표현되는 CSS 속성에만 작동합니다. 색상이나 글꼴 종류처럼 숫자가 아닌 속성은 animate()가 읽어들이지 못합니다.
jQuery animate() 실전 예제
위의 설명을 코드로 풀어보면 훨씬 명확하게 이해할 수 있습니다. 버튼 하나와 <div> 하나로 구성된 기본 HTML부터 시작해 보겠습니다.
HTML <button id="click">Click Me</button> <div id="block">Watch Me!</div>
두 요소 모두 id 속성을 가지고 있습니다. jQuery로 요소를 선택할 때 바로 이 id 속성을 활용합니다. 이제 animate()를 사용할 수 있도록 <div>를 어떻게 스타일링하는지 살펴보겠습니다.
CSS
div {
background-color: lightblue;
width: 100px;
border: 1px solid blue;
}
여기서는 <div>에 배경색, 너비, 그리고 얇은 테두리를 적용했습니다. jQuery로 <div>를 선택한 뒤 animate()에 CSS 속성 객체를 전달하면 되는데, 이 속성들은 우리가 최종적으로 보고 싶은 변경 결과를 반영합니다.
$('#click').click(function() {
$('#block').animate({
width: '70%',
fontSize: '3em',
borderWidth: '10px'
})
})
코드를 하나씩 분석해 보겠습니다. 먼저 click이라는 id 속성으로 버튼을 선택했습니다. 그다음 jQuery의 click() 메서드를 호출해 클릭 이벤트를 기다리는 이벤트 핸들러를 연결합니다. click()이 클릭 이벤트를 감지하면 콜백 함수가 실행됩니다.
다시 한번 짚고 넘어가자면, 콜백 함수란 다른 함수에 전달되어 나중에 실행되는 함수를 의미합니다. 이 예제에서는 클릭 이벤트가 감지된 직후에 실행되는 것이죠. jQuery click()에 대한 자세한 내용은 관련 문서를 참고하세요.
이제 콜백 함수 내부를 들여다보겠습니다. 여기서는 <div>를 선택합니다. 버튼과 마찬가지로 block이라는 id 속성을 사용해 선택한 후, <div>에 animate()를 호출하고 CSS 객체를 전달합니다.
주목할 부분이 있습니다. fontSize와 borderWidth는 CSS에서 흔히 쓰이는 font-size, border-width와 달리 하이픈 없이 작성되었습니다. 하이픈으로 연결되는 CSS 속성은 jQuery에서 카멜 케이스(camelCase)로 표기해야 합니다.
CSS 객체의 값들은 애니메이션이 완료된 후 화면에 렌더링될 최종 상태입니다. 이제 버튼을 클릭하면 <div>가 애니메이션되는 것을 확인할 수 있습니다:
성공했습니다! <div>의 내용물이 새로운 CSS 값에 도달할 때까지 함께 확장되는 모습을 볼 수 있습니다.
마무리
이번 jQuery animate() 입문 강좌에서는 animate()가 CSS 객체를 대상으로 애니메이션을 수행한다는 점을 배웠습니다. 이 CSS 객체에는 최종 화면에 표시될 값들이 담겨 메서드에 전달됩니다. 다시 강조하지만, animate()는 숫자형 CSS 값만 인식합니다. 배경색이나 글꼴 종류 같은 속성은 처리되지 않으니 유의하세요.
jQuery animate()로 배울 내용은 아직 많습니다. 이 입문 내용이 잘 이해되었다면 공식 문서를 읽고 제공된 예제로 직접 연습해 보는 것이 좋습니다. jQuery animate()는 처음에는 다소 복잡해 보일 수 있지만, 꾸준히 연습하면 생각보다 빠르게 애니메이션을 마스터할 수 있을 것입니다!