[제이쿼리] jQuery 애니메이션 메서드 animate()

 

제이쿼리(jQuery) 애니메이션 메서드

---

안녕하세요? 장장스입니다.

오늘은 제이쿼리 애니메이션 메서드를 포스팅해보겠습니다. 애니메이션 메서드를 이용하면 HTML에 적용된 CSS를 조절할 수 있습니다.

 

 

animate() 메서드

---

선택한 요소에 다양한 동작(Motion) 효과를 적용할 수 있습니다. 예를 들어 요소를 앞으로 이동시키거나 점차 커지게 하는  등 다양한 동작을 적용할 수 있습니다.

 

animate() 메서드의 기본형입니다.

 

$("요소 선택").animate({ 스타일 속성 }, 적용 시간, 가속도, 콜백 함수);

 

실습

---

▼javascript

$(function(){
	$(".btn1").on("click", function( ) {
		$(".txt1").animate({
			marginLeft:"500px",
			fontSize:"30px"
		},
		2000, "linear", function( ) {
			alert("모션 완료!"); 
		});
	});
	
	$(".btn2").on("click", function( ) {
		$(".txt2").animate({
			marginLeft:"+=50px"
		},1000);
	}); 
});

▼css

<style>
	.txt1{background-color: aqua;}
	.txt2{background-color: pink;}
</style>

▼html

<div>
	<p><button class="btn1 zzs">버튼1</button></p>
	<span class="txt1">"500px" 이동</span>
	<p><button class="btn2 zzs">버튼2</button></p>
	<span class="txt2">"50px"씩 이동</span>
</div>

▼실행결과입니다. 버튼을 클릭해보세요!

"500px" 이동"50px"씩 이동

 

 

 

 

 

 

Post

---

• jQuery 효과 메서드
• jQuery 애니메이션 메서드 animate()
• jQuery 애니메이션 효과 제어 메서드

References

---

• https://api.jquery.com/category/effects/

 

 

---

잘못된 코드나 내용이 있다면 댓글을 남겨주세요. 즉시 수정하도록 하겠습니다! :)