목차
clearQueue() 예제 - 실행 대기 중인 메서드 모두 제거.
clearQueue() 정의
clearQueue() 구문
clearQueue() 예제 - 대기열 관련 메서드를 한번에 사용하기.
clearQueue() 예제 - 실행 대기 중인 메서드 모두 제거.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height: 300}, 1000);
$("div").animate({width: 300}, 1000);
$("div").animate({height: 100}, 1000);
$("div").animate({width: 100}, 1000);
});
$("#stop").click(function(){
$("div").clearQueue();
});
});
</script>
<button id="start">animate</button>
<button id="stop">clearQueue</button><br><br>
<div style="background:red;height:100px;width:100px;"></div>
clearQueue() 정의
아직 실행 안 된 모든 항목을 대기열에서 제거.
※ 함수 실행 시작 시, 완료 될 때까지 작동함.
※ Queue : '큐 '라고 발음. 실행 대기열 의미.
[관련 queue 메서드]
queue() 메서드
: 대기열의 함수 표시.
dequeue() 메서드
: 대기열의 다음 함수 제거 후, 다음 함수를 실행.
[stop() vs. clearQueue()]
stop() 메서드
: slide, animate 등 animation에서만 작동.
clearQueue() 메서드
: 모든 함수에 대해서 작동.
clearQueue() 구문
$(selector ).clearQueue(queueName )
[매개변수]
queueName
선택. 대기열 이름 지정. (기본값: fx )
※ fx : 표준 효과 대기열. (the standard effects queue)
clearQueue() 예제 - 대기열 관련 메서드를 한번에 사용.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var div = $("div");
$("#start").click(function(){
div.animate({height: 300}, "slow");
div.animate({width: 300}, "slow");
div.queue (function () {
div.css("background-color", "red");
div.dequeue ();
});
div.animate({height: 100}, "slow");
div.animate({width: 100}, "slow");
});
$("#stop").click(function(){
div.clearQueue();
});
});
</script>
<button id="start">start</button>
<button id="stop">stop</button><br><br>
<div style="background:pink;height:100px;width:100px;position:relative"></div>
결과보기
주소 복사
랜덤 이동