1. jQuery에 의해 화면 효과내기 (컨텐츠 표시/숨김 등)
ㅇ $().hide() : 요소를 보이지 않게 함
ㅇ $().show() : 요소를 보이게 함
ㅇ $().toggle() : 요소의 현재 상태를 번갈아 보이게/보이지 않게 함
ㅇ $().fadeIn() : 요소를 서서히 보이게 함
ㅇ $().fadeOut() : 요소를 서서히 보이지 않게 함
ㅇ $().fadeToggle() : 요소의 현재 상태를 번갈아 전환 (fadeIn,fadeOut의 조합)
ㅇ $().fadeTo() : 요소를 지정한 불투명도(0~1)로 서서히 변경함
ㅇ $().slideUp() : 요소를 화면 위쪽으로 미끄러지듯(슬라이드) 하면서 보이지 않게 함
ㅇ $().slideDown() : 요소를 화면 아래쪽으로 미끄러지듯(슬라이드) 하면서 보이게 함
ㅇ $().slideToggle() : 요소의 현재 상태를 번갈아 slideUp 또는 slideDown
※ 전달 매개변수의 일반 형식 : ( duration [, easing] [,complete] )
- duration : 효과 지속 시간
. 밀리초 단위 (fast : 200 ms, normal : 400 ms, slow : 600 ms)
- easing : 불투명도 또는 이징(Easing)
. 불투명도(Opacity) : 0 ~ 1 실수), 0 이면 화면에 보이지 않게 됨
. 이징(Easing) : linear, swing
.. linear : (디폴트) 항상 동일 속도
.. swing : 처음에는 느렸다가 점점 빨라지다가 다시 느려짐
- complete : 효과 실행이 끝나면 실행되는 콜백 함수
※ 전달 매개변수의 옵션 형식 : ( { 옵션명1 : 옵션값1, 옵션명2 : 옵션값2, ... } )
- duration : 효과 지속 시간
- easing : 이징(Easing)
- queue : 애니메이션을 효과 큐에 넣는지 여부(true/false) 또는 큐 이름 지정
- start : 효과 시작 시 실행되는 함수
- progress : 효과 진행 상태를 알도록 하는 함수
- done : 효과 완료 후 실행되는 함수
- complete : 효과 실행이 끝나면 실행되는 콜백 함수
- fail : 효과 실행이 완료되지 못할 시 실행되는 함수
- always : 효과 실행의 완료 유무에 무관하게 실행되는 함수
2. jQuery에 의해 화면 효과내기 (기타)
ㅇ $().fadeTo(지속시간,불투명도,콜백함수)
- 주어진 시간에 정해준 불투명도로 서서히 바꾸고 끝나면 콜백함수를 실행
ㅇ delay(지연시간) : 요소에 효과를 주어진 시간 만큼 지연시키고 보여줌
ㅇ $().animate() : css 속성 값 구문 표현을 거의 그대로 사용 가능
- 구문 형식 : animate(객체 리터럴, 지정 시간, 이징 설정 옵션, 콜백 함수)
. 지정 시간 동안 서서히 객체 리터럴에 지정된 css 속성들을 드러나게 한 후,
. 마지막으로 콜백함수를 수행함
. 여기서, 이징(Easing) 및 콜백함수는 선택옵션 임
ㅇ stop() : 기존에 진행하던 에니메이션을 중단시킴
ㅇ 자바스크립트 함수
- setTimeout(function, 밀리초) : 정한 시간 후에 함수 실행
- setInterva(function, 밀리초) : 정한 시간 마다 함수 실행