jQuery - 애니메이션(animate)

애니메인션(animate)

 

 

애니메이션 사용 - button을 클릭하면 클래스가 box인 요소에 라운드 100px, 2초간 진행

$("button").click(function(){
	$(".box").animate({"border-radius":"100px"},2000);
});

 

 

위의 코드와 같은 코드이다.(카멜 표기법 사용)

$("button").click(function(){
	$(".box").animate({borderRadius:"100px"},2000);
});

 

 

(순차적 진행) - 3초간 라운드100px로 만든 후 넓이를 200px로 진행

$("button").click(function(){
	$(".box").animate({"border-radius":"100px"},3000)
	.animate({"width":"200px"});
});

 

 

(동시진행) - 3초간 라운드100px, 넓이 200px 로 동시에 진행 

$("button").click(function(){
	$(".box").animate({"border-radius":"100px","width":"200px"},3000)

});

 

 

(참고) - 애니메이션은 대기열 기능을 내부적으로 지원

*애니메이션이 끝나지 않았는데 애니메이션을 실행시키면 앞에 실행시킨 애니메이션을 기다렸다가 실행

*선택한 애니메이션을 바로 실행하고 싶으면 stop() 메서드를 사용하여 애니메이션을 중지하고 실행

$("button").click(function(){
	$(".box").stop().animate({"width":"+=100px"});
});

 

 

---

개인 공부용으로 만들었습니다. 
다른 분들에게도 도움이 되었으면 좋겠습니다. 
틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.