jQuery animate() 사용하기
animate()는 4개의 인자를 가진다.
- .css()와 비슷한 속성값
- 속도, 역시 1/1000초 단위
- 외부 플러그인(pulg-in)효과주기
- 콜백함수
문법
.animate( properties [, duration ] [, easing ] [, complete ]
$(div).animate(attribute, speed, plug-in, callback_fnc);
- 속성 입력
$('#box').animate({ 'width':'500px',opacity:0.4});
- 속도 입력
$('#box').animate({ 'width':'500px',opacity:0.4},200);
See the Pen jQuery - Animate() by younghyeong ryu (@wangta69) on CodePen.
예제들
See the Pen jQuery - Animate() by younghyeong ryu (@wangta69) on CodePen.
motion
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInSine
- easeOutSine
- easeInOutSine
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeInElastic
- easeOutElastic
- easeInOutElastic
- easeInBack
- easeOutBack
- easeInOutBack
- easeInBounce
- easeOutBounce
- easeInOutBounce