jQuery :: 6 -1. 효과, 애니메이션 메서드

 

 

 

 

  효과 메서드 사용법  

 

  $('요소 선택').효과메서드(효과 소요 시간, 가속도, 콜백함수);

 

-효과 소요시간

  'slow', 'normal', 'fast'

  1000(1초), 500(0.5초)

 

-가속도

  'swing'  : 시작과 끝은 느리고 중간은 빠른 속도로.

  'linear'  : 일정한 속도로.

 

-콜백함수 : 효과가 끝난후 실행할 함수. 생략가능.

 

 

 

 

  효과 메서드  

숨김	hide( )	요소를 숨김.
	fadeOut( )	요소가 점점 투명해지며 숨겨짐.
	slideUp( )	요소가 위로 접히며 숨겨짐.
노출	show( )	숨겨진 요소 노출.
	fadeIn( )	숨겨진 요소가 점점 선명해짐.
	slideDown( )	숨겨진 요소가 아래로 펼쳐짐.
노출, 숨김	toggle( )	hide( ), show( ) 효과 적용.
	fadeToggle( )	fadeIn( ), fadeOut( ) 효과 적용.
	slideToggle( )	slidUp( ), slideOut( ) 효과 적용.
	fadeTo( )	투명도를 지정하여 적용.

 

ex

 

 

 

 

 

 

 

  애니메이션 효과 적용방법  

 

$('요소선택').animate({스타일 속성}, 적용 시간, 가속도, 콜백함수)

 

 

ex.

버튼1을 누르면 300px 이동, 버튼2는 누를때마다 50px식 이동함.