[jQuery] 이펙트(effect) 효과 - .fadeIn(), .fadeOut() 함수

 

 

자바스크립트의 제이쿼리(jQuery)에서 이펙트(effect) 효과를 표현하는 함수들이 있습니다. 그중에 해당 요소에 페이드(fade) 효과를 표현하는 함수인 .fadeIn(), .fadeOut() 함수가 있습니다.

 

jquery(제이쿼리)의 .fadeIn() 함수

jQuery(제이쿼리)의 .fadeIn() 함수는 선택한 요소를 서서히 나타나게 표현하는 함수입니다. 나타나게 하는 시간을 설정할 수 있는데 시간 설정을 문자나 숫자로 정할 수 있습니다. 그 이외의 옵션에 나타나게 하는 모양도 설정이 가능합니다.

//.fadeIn() 함수 사용법
.fadeIn( [duration], [ easing ]);

//duration - 시간설정
//easing - 모양설정


//.fadeIn() 나타나는  시간설정

.fadeIn( 'slow' );

.fadeIn( '300' );

//.fadeIn() 나타나게 하는 모양설정

.fadeIn( 'swing' );

.fadeIn( 'linear' );

 

jquery(제이쿼리)의 .fadeOut() 함수

jQuery(제이쿼리)의 .fadeOut() 함수는 선택한 요소를 서서히 사라지게 표현하는 함수입니다. .fadeIn() 함수와 같이 사라지게 하는 시간 및 모양을 함께 설정하는 옵션이 있습니다.

 

//.fadeOut() 함수 사용법
.fadeOut( [duration], [ easing ]);

//duration - 시간설정
//easing - 모양설정


//.fadeOut() 사라지는 시간설정

.fadeOut( 'slow' );

.fadeOut( '300' );

//.fadeOut() 사라지게 하는 모양설정

.fadeOut( 'swing' );

.fadeOut( 'linear' );