jQuery 화면 효과

(2017-06-17)
정보기술(IT) 1. 정보기술

전산기초
컴퓨터구조
프로그래밍
데이터베이스
소프트웨어 공학
운영체제
정보보호/보안
IT 기타기술
 > 프로그래밍프로그래밍 언어론
객체지향
자료구조
알고리즘
자료표현(알파벳/코드)
시스템 프로그래밍
프로그래밍언어 종류
프로그래밍 기타일반
 > 프로그래밍언어 종류 1. 프로그래밍 언어
2. 기계어,어셈블리언어

C/C++
자바(Java)
자바스크립트
 > 자바스크립트 1. JavaScript
2. JS 객체
3. JS 변수,타입
4. JS 함수
5. JS 배열

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

     
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  : 처음에는 느렸다가 점점 빨라지다가 다시 느려짐

  ㅇ $().fadeTo(시간,불투명도,콜백함수) 
     - 주어진 시간에 정해준 불투명도로 서서히 바꾸고 끝나면 콜백함수를 실행

  ㅇ delay(시간) : 요소에 효과를 주어진 시간 만큼 지연시키고 보여줌

  ㅇ $().animate()    : css 속성 값 구문 표현을 거의 그대로 사용 가능
        . 구문 형식 : animate(객체리터럴,시간,이징설정옵션,콜백함수)
           .. 지정 시간 동안 서서히 객체 리터럴에 지정된 css 속성들을 드러나게 한 후,
              마지막으로 콜백함수를 수행함
           .. 여기서, 이징(Easing)은 선택옵션 임

  ㅇ stop() : 기존에 진행하던 에니메이션을 중단시킴


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

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