jQuery :: 6 -2. 애니메이션 효과 제어 메서드

 

 

 

 

  애니메이션 적용 원리  

애니메이션 메서드는 함수가 적용된 순서대로 큐(queue)에 저장됨.

큐는 FIFO(First In First Out)형식으로 작동. (== 먼저 들어간 효과가 먼저 적용됨.)

 

 

 

  제어메서드(ex. stop 메서드)가 왜 필요할까?  

 

 

(왼) 제어 메서드X   /   (오) 스탑 메서드

스탑메서드가 없는 경우, 파란 박스 위에 마우스를 올렸다가 뺐다가를 30회 반복했을 때,

마우스가 파란박스 밖에만 있어도 30회를 반복할 때 까지 애니메이션 실행.

 

스탑메서드가 있는 경우, 마우스를 상자위로 이동했다가 밖으로 옮길 때,

아직 박스가 다 늘어나지 않더라도 마우스를 상자밖으로 옮기면

늘어나는 것을 멈추고 원래 크기로 돌아옴.

 

 

  //  제어메서드를 사용할 경우, 사용자의 움직임에 따라 애니메이션이 바로 반응함.

  //  제어메서드를 사용하지 않는다면, 사용자의 움직임에 바로 반응X 큐에 저장된 순서에 따라 반응.

 

 

 

 

 

  애니메이션 효과 제어 메서드  

 

stop( )	$('요소선택').stop( );  $('요소선택').stop(celarQueue, finish);	현재 실행 중인 효과 모두 정지.  clearQueue가 ture : 큐에서 대기 중인 모든 애니메이션 제거.  finish가 true : 진행중인 애니메이션 강제 종료.  (clearQueue, finish의 기본값 == flase)
delay( )	$('요소선택').delaty(지연시간).메서드;	지정한 시간만큼 지연했다가 애니메이션 진행.
queue( )	$('요소선택').queue( );  $('요소선택').queue(function( ){ 코드 });	큐에 사용자 정의 함수를 추가하거나  큐에 대기 중인 함수를 배열에 담아 반환.  그 후 queue( ) 메서드 이후의 애니메이션 효과 모두 취소.
clearQueue( )	$('요소선택').clearQueue( );	큐에서 처음으로 진행하고있는 애니메이션만 제외하고 대기중인 애니메이션 모두 제거.
dequeue( )	$('요소선택').dequeue( );	메서드가 제거되는 것 방지.(queue와 반대되는 메서드)
finish( )	$('요소선택').finish( );	선택한 요소의 진행중인 애니메이션을 강제로 완료시킨후 종료.