jQuery 화면 효과

(2017-09-04)
1. jQuery에 의해 화면 효과내기 (컨텐츠 표시/숨김 등)

  ㅇ $().hide()        : 요소를 보이지 않게 함
  ㅇ $().show()        : 요소를 보이게 함
  ㅇ $().toggle()      : 요소의 현재 상태를 번갈아 보이게/보이지 않게 함
  ㅇ $().fadeIn()      : 요소를 서서히 보이게 함
  ㅇ $().fadeOut()     : 요소를 서서히 보이지 않게 함
  ㅇ $().fadeToggle()  : 요소의 현재 상태를 번갈아 전환 (fadeIn,fadeOut의 조합)
  ㅇ $().slideUp()     : 요소를 화면 위쪽으로 미끄러지듯(슬라이드) 하면서 보이지 않게 함
  ㅇ $().slideDown()   : 요소를 화면 아래쪽으로 미끄러지듯(슬라이드) 하면서 보이게 함
  ㅇ $().slideToggle() : 요소의 현재 상태를 번갈아 slideUp 또는 slideDown 

  ※ 위 메소드들의 전달 매개변수
     - 첫번째 전달 매개변수시간 단위 임
        . 밀리초 단위 (fast : 200 ms, normal : 400 ms, slow : 600 ms)
     - 두번째 전달 매개변수는 불투명도/이징(Easing) 등 임
        . 불투명도(Opacity) : 0 ~ 1 실수), 0 이면 화면에 보이지 않게 됨
        . 이징(Easing)      : linear, swing
           .. linear : (디폴트) 항상 동일 속도
           .. swing  : 처음에는 느렸다가 점점 빨라지다가 다시 느려짐


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 화면 효과

 
        최근수정     모바일웹     참고문헌