[JQuery 요약 정리] 5. 애니메이션

5. 애니메이션

1) 기본 시각 효과

- 메소드 종류

show() : 객체를 크게 확대하며 보여줌

hide() : 객체를 작게 축소하며 사라지게 함

toggle() : show()와 hide()를 번갈아가며 실행

slideDown() : 객체를 슬라이드 효과와 함께 보여줌

slideUp() : 객체를 슬라이드 효과와 함께 사라지게 함

slideToggle() : slideDown()과 slideUp() 메소드를 번갈아가며 실행

fadeIn() : 객체를 선명하게 보여줌

fadeout() : 객체를 흐리며 사라지게 함

fadeToggle() : fadinIn()과 fadeOut() 메소드를 번갈아 실행

- 사용 양식

$('선택자').메소드();

$('선택자').메소드(speed);

$('선택자').메소드(speed, callback);

$('선택자').메소드(speed, easing, callback);

- 매개변수의 의미

speed: 효과의 진행 속도(밀리초 단위 숫자 혹은 slow, normal, fast)

callback: 효과 완료 후 실행할 함수 지정

easing: 애니메이션 easing 형태 지정, 플러그인 미사용시 linear, swing만 지정 가능

2) 사용자 지정 효과

- animate() 메소드를 통해 생성

- position 스타일 속성이 absolute 혹은 relative여야 함

- 사용 양식

$('선택자').animate(object);

$('선택자').animate(object, speed);

$('선택자').animate(object, speed, easing);

$('선택자').animate(object, speed, easing, callback);

- object에 입력 가능한 속성

opacity, height, top, width, left, margin, right, padding, bottom

- width와 height의 값을 parseInt() 메소드를 통해 숫자로 연산 가능

* width: parseInt(width) + 50 으로 50씩 일정하게 증가시킬 수 있음

3) 애니메이션 정지

- jQuery의 효과 메소드는 큐(Queue)에 지속 누적되어 선입 선출

- clearQueue() 메소드를 통해 큐를 비울 수 있음(진행 중인 애니메이션은 정지되지 않음)

- stop() 메소드를 통해 진행중인 효과 및 애니메이션을 정지시킬 수 있음

$('선택자').stop();

$('선택자').stop(clearQueue); -> true시 큐를 비움

$('선택자').stop(clearQueue. goToEnd); -> true시 지정한 최종 형태에서 정지

4) 애니메이션 지연

- delay() : 큐의 명령을 잠시 중지

$('선택자').delay(밀리초).animate()

5) 그 외

- jQuery UI Effect 플러그인: jQuery 공식 지정 플러그인

http://jqueryui.com/