jQuery 화면 효과

     (수정일:2017-09-04)

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

[jQuery]
1. jQuery 2. jQuery 요소 선택법 3. jQuery 활용 4. jQuery 이벤트 5. jQuery 화면 효과

       최근수정이력     PC 화면