[jQuery 정리노트] 6. jQuery animate()

[jQuery 정리노트] 5. jQuery animate()

1. 이번수업의 목적

- jQuery의 .animate() 구문을 이용하여 특정 요소의 css속성값에 변화를 주어 모션을 실행하는 법을 학습합니다.

2. 핵심개념

- animate() 구문에서 시간과 가속도 설정하기 (easing.js)

- animate() 구문의 모션 중첩을 제거하는 .stop() 구문

- animate() 구문에서 특정모션이 끝난직 후, 새로운모션을 연결해서 실행시켜주는 콜백함수

[출처] .animate() -필수구문21|작성자 하다보니

구글에 easing.js 검색해서 easeOutBounce와 같은 효과를 찾아서 확인할 수가 있다.

-----------------------------------------

$(document).ready(function(){

$(".box1").on("mouseenter",function(){

$(".box1").stop().animate({"width":"600px"},800,"easeOutBounce",function(){

$(".box1").stop().animate({"backgroundColor":"green"})

});

});

$(".box1").on("mouseleave",function(){

$(".box1").stop().animate({"width":"300px"},800,"easeOutBounce",function(){

$(".box1").stop().animate({"backgroundColor":"red"})

});

});

});

-----------------------------------------