queue() 메서드는 일치하는 요소에서 실행되는 함수 대기열을 표시하거나 작동합니다.
큐 및 큐 제거 프로세스는 주로 다음과 같습니다.
큐를 사용하여 함수를 큐에 추가합니다(보통 함수 배열)
dequeue를 사용하여 함수 배열의 첫 번째 함수를 꺼내서 실행합니다(꺼내고 실행하려면 Shift() 메서드 사용).
즉, Dequeue를 다시 실행하면 또 다른 기능을 얻게 된다는 뜻입니다. 이는 또한 대기열에서 제거가 실행되지 않으면 대기열의 다음 함수가 절대 실행되지 않음을 의미합니다.
요소에 애니메이션 메서드와 애니메이션을 실행하기 위해 jQuery는 내부적으로 fx라는 함수 대기열에도 해당 요소를 추가합니다. 여러 요소를 순차적으로 애니메이션화하려면 대기열을 수동으로 설정해야 합니다.
두 개의 div를 순서대로 왼쪽으로 이동하는 예:
먼저 순서대로 실행해야 하는 일련의 애니메이션이 포함된 함수 배열을 만들었습니다.
그런 다음 콜백 함수를 정의하고 dequeue 메서드를 사용하여 대기열의 다음 함수를 실행했습니다.
그런 다음 이 함수를 추가했습니다. 배열은 문서의 myAnimation 대기열에 배치됩니다(어떤 요소든 선택할 수 있습니다. 저는 편의를 위해 이 대기열을 문서에 넣습니다)
마지막으로 대기열의 첫 번째 함수 실행을 시작합니다
이것의 장점은 함수 배열이 선형적으로 확장되어 증감이 매우 편리하기 때문입니다. 또한 더 이상 다음 애니메이션을 계속하고 싶지 않은 경우(예: 사용자가 버튼을 클릭하는 경우) 대기열을 지우기만 하면 됩니다. 더 추가하려면 대기열에 참여하세요.
물론 ajax와 같은 메서드에도 사용할 수 있습니다. 일련의 ajax 상호 작용이 필요한 경우 각 ajax는 이전 ajax가 끝난 후 시작하려고 합니다. 이전의 가장 독창적인 방법은 콜백 함수를 사용하는 것이었지만 이는 다음과 같습니다. 너무 귀찮다. 또한 대기열을 사용하여 대기열을 추가하고 각 ajax 이후 콜백에서 대기열 제거를 한 번 실행합니다.
jQuery에서 애니메이션 애니메이션의 대기열 구현, 아래 JavaScript를 사용하여 구현: