콘텐츠
이번 포스팅 저번 jQuery .css() 메서드 이용 웹 페이지 스타일링 기본 가이드 에 이어 jQuery 메서드 소개 시간으로 애니메이션 메서드 들에 대해 설명한다.
jQuery 는 CSS 속성을 변화 시킬 때 여러 효과를 줄 수 있는 다양한 메서드들을 제공한다.
예를 들어 서서히 사라지는 효과, 마우스를 올렸을 때 확대되는 효과 등을 쉽게 구현할 수 있다.
.adnimate() 메서드
가장 강력하고 유연한 메서드로 이전 이벤트 메서드 에서 다룬 대부분의 이벤트 바인딩이 가능한 .on() 과 같이 여러 애니메이션을 생성하기 위한 메서드다.
기본적인 코드는 다음과 같다.
기본 코드 구성:
$(CSS 선택자).animate(properties, duration, easing, complete);- properties: 애니메이션을 적용할 CSS 속성과 최종 값의 객체다. {opacity: 0.5, width: “50%”} 와 같이 여러 속성을 동시에 변경할 수도 있다.
- duration: 애니메이션이 완료되는 데 걸리는 시간이며, 밀리초 단위로 지정하거나 “slow”, “fast”와 같은 문자열을 사용할 수 있다.
- easing: 애니메이션의 속도 곡선을 지정한다. jQuery는 기본적으로 “swing”과 “linear” 두 가지 easing 함수를 제공한다.
- complete: 애니메이션이 완료된 후 실행할 콜백 함수다.
예를 들어, 어떤 요소의 너비를 100픽셀로 서서히 변경하고 싶다면 다음과 같이 작성할 수 있다.
샘플 코드:
$(CSS 선택자).animate({
width: "100px"
}, 2000, "swing", function() {
// 애니메이션이 끝난 후 여기에 코드를 작성
alert("애니메이션 완료!");
});해당 코드의 동작 GIF:
easing 함수
jQuery 에서 애니메이션의 중간 상태들을 결정하는 함수로 swing 과 linear 두 가지의 기본적인 함수가 제공 된다.
swing
jQuery의 기본 easing 함수다. 애니메이션의 시작과 끝에서는 속도가 느리고, 중간에는 빨라지는 효과를 준다.
이는 대부분의 자연스러운 움직임이 가속도와 감속도를 동반하기 때문에, 가장 일반적으로 사용되는 애니메이션 효과다.
“swing”은 애니메이션이 부드럽게 시작하여 점점 빨라지다가 다시 부드럽게 끝나는 곡선을 그린다.
linear
애니메이션의 시작부터 끝까지 일정한 속도로 진행된다. 애니메이션의 속도가 변하지 않기 때문에, 움직임이 균일하게 느껴진다.
“linear”는 주로 균일한 속도로 움직이는 객체를 표현할 때 사용된다. 예를 들어, 직선 경로를 따라 동일한 속도로 이동하는 애니메이션에 적합하다.
swing 과 linear 차이:
그 외 애니메이션 메서드
.adnimate() 메서드는 CSS 를 다룰 줄 알면 다양한 애니메이션을 만들 수 있지만, 특정 애니메이션 효과는 특화 되어 메서드화 되어 있다. 그 중 몇 가지를 소개한다.
.slideDown()
.slideDown() 메서드는 요소를 위, 아래로 천천히 펼칠 때 사용되는 애니메이션이다. 사용 시 요소는 기본적으로 display 속성이 none; 인 상태여야 한다.
기본 코드 구성:
$(CSS 선택).slideDown(duration, easing, complete);샘플 코드:
<!DOCTYPE html>
<html>
<head>
<title>문서 제목</title>
</head>
<body>
<div id="redBox" class="boxs"style="display: none; width: 100px; height: 200px; background-color: red;"></div>
<br/>
<script src="jquery-3.7.1.min.js"></script>
<script>
$("#redBox").slideDown(2000, "linear", function() {
//애니메이션 후 실행될 코드
});
</script>
</body>
</html>
.fadeOut()
요소의 투명도를 점차 감소시켜 서서히 사라지게 하는 애니메이션을 구현할 때 사용된다.
기본 코드 구성:
$(CSS 선택자).fadeOut(duration, easing, complete);샘플 코드:
<!DOCTYPE html>
<html>
<head>
<title>문서 제목</title>
</head>
<body>
<div id="redBox" class="boxs"style="width: 100px; height: 100px; background-color: red;"></div>
<script src="jquery-3.7.1.min.js"></script>
<script>
$("#redBox").fadeOut(2000, "linear", function() {
//애니메이션 후 실행될 코드
});
</script>
</body>
</html>
이 외에도 다양한 애니메이션 메서드가 존재 한다.
애니메이션 메서드 목록:
- .animate(): 가장 강력하며 유연한 애니메이션 메서드로, 사용자 정의 애니메이션을 생성한다. CSS 속성을 대상으로 하여 값의 변화를 시간에 따라 적용한다.
- .fadeIn() / .fadeOut(): 요소의 투명도를 조절하며 서서히 나타나거나 사라지게 한다.
- .fadeTo(): 요소의 투명도를 지정한 값으로 애니메이션하며, 최종 투명도를 제어할 수 있다.
- .fadeToggle(): fadeIn()과 fadeOut()의 토글 기능으로, 요소의 투명도 상태에 따라 나타나거나 사라지게 한다.
- .slideDown() / .slideUp(): 요소를 수직 방향으로 서서히 펼치거나 접는다.
- .slideToggle(): slideDown()과 slideUp()의 토글 기능으로, 요소의 표시 상태에 따라 수직 방향으로 펼치거나 접는다.
- .delay(): 연속된 애니메이션 사이에 대기 시간을 추가한다.
이러한 간단한 문법 메서드 들을 활용하여 웹 페이지에 복잡한 효과를 지닌 동적인 요소를 추가할 수 있다.
