[jQuery] animate 및 관련 메서드 queue , dequeue ,clearqueue, Stop

공부노트/jQuery

Reload0213 2021. 10. 15. 01:57

애니매이션을 적용시키고 싶을 때 사용

(선택객체).animate( {변경할 디자인} , 애니매이션 작동시간(ms) , 타이밍(진행 속도), 애니매이션이 완료 되었을때 동작하는 콜백 함수 )

- 특정 요소에서 애니매이션이 실행되는 순서로 저장되어 있는 공간

- queue에 저장된 목록에서 순번대로 애니매이션을 하니씩 꺼내어 실행하게되고, 실행된 애니매이션은 제거된다.

- 큐에 대기중인 함수를 반환하거나 새로운 함수를 추가한다.

- 하지만 queue() 메서드를 animate() 중간에 추가하게되면 queue()메서드가 추가된 곳까지만 실행이되고 그 뒤에 대기중인 대기열은 자동 취소가 된다.

- 위와 같은 상황을 방지하게 위해 dequeue() 메서드를 추가해 주면 애니매이션이 취소되지 않고 연결되어 애니매이션을 실행하게 할 수 있다.

clearQueue , stop

큐 안의 대기중인 애니매이션들을 지울 때 사용

첫 애니매이션은 그냥 실행되게된다.

: queue의 대기열에 들어가는 것은 첫 번째를 제외한 다음 순서의 애니매이션들이기 때문에 clearQueue()를 사용하게되면 대기열에 들어가있던 나머지 애니매이션들은 삭제되어 작동되지 않는다.

stop()함수가 호출되면, 현재 진행 중인 애니메이션이 즉시 멈추는데, 매개 변수에 따라 큐에 대기중인 애니메이션 효과 처리가 조금씩 다릅니다.

1. stop(true, true) : $("#box1").stop(true,true)

현 진행되고 있는 효과는 정지되고 현재 효과의 끝으로 이동한 후 나머지 효과들은 지워 진다.

2. stop(true, false) : $("#box2").stop(true,false)

현 진행되고 있는 효과는 정지되고 모든 효과들이 정지된다.

3. stop(false,true) : $("#box3").stop(false,true)

현 진행되고 있는 효과는 정지되고 현재 효과의 끝으로 이동한 후 남은 효과들이 실행된다.

4. stop(false,false) : $("#box4").stop(false,false)

현 진행되고 있는 효과는 정지되고 남은 효과들이 실행된다.

이미지 출처 : 참고서적 : 바로바로 할 수 있는 jQuery 입문 저자 : 유광열