제이쿼리 애니메이션

제이쿼리 애니메이션

나타나고 사라지는 효과 만들기

$대상.show()

$대상.hide()

$대상.toggle()

 

이징 함수 연결하기

$대상.show(duration, easing)

 

duration

효과가 지속될 값, 밀리초 단위로 기본값은 400ms slow, normal, fast도 사용할 수 있습니다.

 

easing

움직임을 구현하는 함수명으로 점점느리게, 점점 빠르게 등에 사용합니다.

http://jqueryui.com/easing/

Easing | jQuery UI

애니메이션 지연시간 설정하기 delay()

* show/hide에는 사용할 수 없으며 fadeInOut, slideUpDown, animate 등에 사용가능합니다.

 

$Node.delay().애니메이션()
//일정시간 후 애니메이션 실행
$Node.애니메이션.delay()
//애니메이션 실행 후 일정 시간 지나기..(뒤쪽 상황 설정안되어있음)
$Node.애니메이션().delay().애니메이션()
//애니메이션 실행 후 일정시간 후 뒤 애니메이션 실행하기

 

 

---

자연스럽게 나타났다가 사라지기

제자리 나타나기, 사라지기

$Node.fadeIn()

$Node.fadeOut()

$Node.fadeToggle()

 

 

$('Node').fadeIn();
$('Node').fadeOut();
$('Node').fadeToggle();

슬라이드 업/다운하기

$대상.slideUp()

$대상.slideDown()

$대상.slideToggle()

$('Node').slideUp();
$('Node').slideDown();
$('Node').slideToggle();

 

 

사용자 정의 애니메이션

animate() 메서드

$대상.animate(properties, options)

애니메이션의 속성 값의 변화를 가지는 속성만 적용 가능합니다.

ex) display:none; display:block은 none /  block 변화 되는 값이 아니므로 불가능합니다.

ex) opacity:0; opacity:0.5 / opacity 0 ~ 0.5로 변화되는 값이 있으므로 가능합니다.

properties

애니메이션을 적용할 CSS 스타일 값이 담긴 객체

options

duration,easing, complete매개변수를 담는 위치

 

//$(대상).animate({속성:값}, 속도, 콜백함수);

$(‘p’).animate({
	opacity: “0.5”
 },1000);