jQuery 화면 효과

(2019-11-08)

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, 밀리초) : 정한 시간 마다 함수 실행

jQuery
   1. jQuery   2. jQuery 요소 선택법   3. jQuery 활용   4. jQuery 이벤트   5. jQuery 화면 효과   6. jQuery 요소 삽입/삭제/교체/복사   7. jQuery ajax   8. jQuery 객체  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"