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();
});