clearQueue 메서드
clearQueue 메서드를 사용하면 아직 실행되지 않은 모든 함수를 큐에서 제거할 수 있습니다.
구문
다음과 같이 함수 큐를 지울 수 있습니다. 선택적 매개변수로 큐의 이름을 문자열로 전달할 수 있습니다(기본값은 fx - 표준 효과 큐입니다). 매개변수를 전달하지 않으면 fx 큐에서 남아 있는 모든 함수가 제거됩니다:
.clearQueue([queueName]);
이 메서드는 stop 메서드와 유사합니다. 그러나 후자가 애니메이션에서만 작동할 수 있다면, clearQueue는 queue 메서드로 추가된 jQuery의 모든 큐와 함께 작동할 수 있습니다.
예제
버튼 #start을 클릭하면 애니메이션이 시작되도록 해봅시다.
버튼 #stop을 클릭하면 애니메이션을 멈추고 clearQueue 메서드를 사용하여 큐를 지울 것입니다.
#start을 다시 클릭하면 애니메이션이 처음부터 다시 시작됩니다:
<button id="start">시작</button>
<button id="stop">중지</button>
<div></div>
div {
position: absolute;
margin: 3px;
width: 50px;
height: 50px;
left: 0px;
top: 30px;
background: red;
display: none;
}
div.newcolor {
background: green;
}
$('#start').click(function() {
let myDiv = $('div');
myDiv.show('slow');
myDiv.animate({
left: '+=200'
}, 5000);
myDiv.queue(function() {
let that = $(this);
that.addClass('newcolor');
that.dequeue();
});
myDiv.animate({
left: '-=200'
}, 1500);
myDiv.queue(function() {
let that = $(this);
that.removeClass('newcolor');
that.dequeue();
});
myDiv.slideUp();
});
$('#stop').click(function() {
let myDiv = $('div');
myDiv.clearQueue();
myDiv.stop();
});
