animation 효과

2015. 5. 19. 00:34plming/jQuery

. hide( speed=Number|String, callback=Function )

확장 집합의 엘리먼트를 감춘다.

매개변수 없이 호출하면 엘리먼트의 display 스타일 프로퍼티 값을 즉시 none으로 설정한다.

speed 매개변수를 제공하면 크기와 불투명도(opacity)를 점차 0으로 줄여가다가 지정된 시간이 되면 display 스타일 프로퍼티 값을 none으로 설정해서 엘리먼트를 화면에서 감춘다.

선택적으로 애니메이션이 완료된 뒤 호출될 콜백 함수를 지정한다.

 

speed : 선택사항으로 효과가 지속될 시간을 1/1000초 단위의 숫자 또는

            미리 정의된 문자열(slow/normal/fast)가운데 하나로 명시한다.

            생략하면 애니메이션은 수행되지 않으며 엘리먼트는 즉시 화면에서 제거된다.

callback : 선택사항으로 애니메이션이 완료된 뒤 호출되는 함수

              매개변수는 전달되지 않지만, 애니메이션이 수행되는 엘리먼트가 this가 된다.

 

 

. show( spped=Number|String, callback=Function )

확장 집합의 감춰진 모든 엘리먼트를 보이게 한다.

매개변수 없이 호출되면 연산을 즉시 수행한다.

이때, 엘리먼트가 jQuery를 이용해 감춰졌단면 display 스타일 프로퍼티 값을 (block이나 inline같은) 이전 값으로 설정한다.  엘리먼트가 jQuery를 이용해 감춰지지 않았다면 display 스타일 프로퍼티 값을 block으로 설정한다.

speed 매개변수를 제공하면 크기를 키우고 불투명도를 높여가면서 엘리먼트가 정해진 시간 동안 서서히 나타난다.

선택적으로 애니메이션이 완료된 뒤 호출될 콜백 함수를 지정한다.

 

 

. toggle( speed=Number|String, callback=Function )

감춰진 확장 엘리먼트에는 show()를 수행하고,

드러난 확장 엘리먼트에는 hide()를 수행한다.

 

 

※ 파이어폭스와 인터넷 익스플로러에서는 폼 엘리먼트이 초기값이 없는 경우

    새로고침을 해도 기존에 입력한 값이 그대로 남아있다.

 

 

. fadeOut( speed=Number|String, callback=Function )

일치하는 엘리먼트 중 드러난 엘리먼트의 불투명도를 0%로 줄여가면서 화면에서 제거한다.

불투명도가 변경되는 지속시간은 speed 매개변수에 따라 변한다.

이미 감춰진 엘리먼트는 영향을 받지 않는다.

 

speed : 생략되면 기본값인 normal을 이용

 

 

. fadeIn( speed, callback )

일치하는 엘리먼트 중 감춰진 엘리먼트의 불투명도를 점차 원상태로 조절하면서 보이게 한다.

원상태 값은 엘리먼트에 원래 적용되어 있던 값 또는 100%다.

불투명도가 변경되는 지속 시간은 speed 매개변수에 따라 변한다.

이미 드러나 있는 엘리먼트는 영향을 받지 않는다.

 

 

. fadeTo( speed=Number|String, opacity=Number, callback=Function )

확장 엘리먼트의 불투명도를 현재의 설정 값에서 opacity 매개변수 값으로 설정

 

opacity : 0.0 에서 1.0 사이의 값으로 엘리먼트에 적용될 불투명도 값

 

fadeOut 효과와는 다르게 엘리먼트가 완전히 보이지 않아도 화면에서 제거하지 않는다.

 

 

. slideDown( speed, callback )

감춰진 모든 일치하는 엘리먼트가 높이 값이 증가하면서 나타난다.

드러나 있는 엘리먼트는 영향을 받지 않는다.

 

 

. slideUp( speed, callback )

드러나 있는 모든 일치하는 엘리먼트가 점차적으로 높이 값이 감소하면서 화면에서 제거된다.

 

 

. slideToggle( speed, callback )

감춰진 확장 엘리먼트에는 slideDown()을 수행하고

드러나 있는 엘리먼트에는 slideUp()을 수행한다.

 

 

. stop()

확장 집합에 있는 엘리먼트에 현재 진행하는 애니메이션을 중지한다.

 

 

. animate( properties=Object, duration=Number|String, easing=String, callback=Function )

. animate( properties=Object, options=Object )

모든 확장 집합의 엘리먼트에 properties와 easing 매개변수에 명시된 대로 애니메이션을 수행한다.

애니메이션 수행이 완료된 뒤 호출될 콜백 함수를 선택적으로 명시할 수 있다.

 

properties : 애니메이션의 마지막에 도달해야 하는 값을 명시하는 객체 해시

                 CSS스타일에서 지원하는 값을 허용

                 애니메이션은 엘리먼트의 스타일과 관련된 프로퍼티들의 현재 객체 해시에 명시된 값으로 프로퍼티 값을 조절함으로써 동작한다.

duration : 선택사항으로 효과가 지속되는 시간을 1/1000초 단위의 숫자 또는 미리 정의된 문자열 (slow/normal/fast) 가운데 하나로 명시한다.

              생략하면 애니메이션을 수행하지 않는다.

easing : 선택사항으로 애니메이션을 미묘하게(?) 바꿀 때 사용하는 함수 이름

             이러한 함수들은 반드시 등록되어 있어야 하며 플러그인으로 제공되기도 한다.

             jQuery는 linear와 swing 두 함수를 기본으로 제공한다.

options : 객체 해시를 이용해 애니메이션 매개변수를 명시한다.

             . duration, easing

             . complete - 애니메이션 수행이 완료된 뒤 호출될 함수

             . queue - false값이라면 애니메이션은 Queue에 쌓이지 않고 바로 동작을 시작한다.

 

애니메이션을 미묘하게(?) 바꾼다는 것

애니메이션 프레임의 프로세싱과 속도를 처리하는 방법을 조작한다는 의미.

 

 

선형적인 진행을 제공하는 linear나 애니메이션의 마지막 부분에 속도를 높이는 swing

이외의 예제를 찾아보려면 Easing 플러그인을 참조

http://gsgd.co.uk/sandbox/jquery.easing.php

 

색상을 명시하는 CSS값을 애니메이션으로 수행하려면

Color Animation 플러그인을 참조

http://jquery.com/plugins/project/color

 

 

기본적으로 애니메이션은 실행을 위해 Queue에 추가

다중 애니메이션을 객체에 적용하면 차례대로 수행

CSS 스타일 프로퍼티 중에서 숫자를 값으로 받는 것들만 애니메이션으로 처리 가능

 

크기를 나타내는 값으로 픽셀(pixel)을 기본 단위로 가정

em이나 %를 접미사로 이용하면 비율과 백분율도 이용 가능

 

 

animate()를 이용한 토글기능

$( '.animateMe' ).animate( {opacity:'toggle'}, 'slow' );

 

 

'plming > jQuery' 카테고리의 다른 글

jQuery 사용자 정의 플러그인  (0) 2015.05.22
Ajax 요청 직접 제어하기  (1) 2015.05.17
Ajax - GET/POST 요청 만들기  (0) 2015.05.15
Ajax - 엘리먼트에 콘텐츠 로드하기  (0) 2015.05.14
Ajax  (0) 2015.05.14