clearQueue とは
- ここで説明する clearQueue とは次の語句からなる jQuery のメソッドです。
- clear
- 読み: クリア
意味: 澄んだ、きれいな、消え去ってなくなる - queue
- 読み: キュー
意味: 列、並んで
clearQueue メソッドの概要
このメソッドは、呼び出し元に登録されているキューの実行配列を空にします。
clearQueue() を実行したタイミングでキューの配列を空にするので、 このメソッドでは、既に動作を開始しているキューは止めることはできません。
動作中のキューを止めるには、
stop()
を使用してください。
また、全てのキューを終了するには
finish()
を使用してください。
構文
サンプルを見る前に構文を確認しておきます。
$(Selector).clearQueue([queueName])- queueName: 省略可能な引数です。キューの名前を指定します。省略した場合には、デフォルト値の fx になります。
サンプルコードと実行結果
ここでは、div 要素の親子をサンプルとしてみました。
サンプルでは、親 div の内周を 子 div が周回するアニメーションを作成するために、4つの animate() メソッドを使ってアニメーションのキューを作成しています。
キューに追加されたアニメーションは、1つのアニメーションが完了した時点で次のキューを開始するといった形式で、 実行されていきます。
このサンプルはアニメーションのキューを clearQueue() を使って空に (削除) します。
サンプルコード: CSS
<style>
#idParent{
background-color: ##white;
border: thin solid ##lightgray;
height: 201px;
width: 201px;
}
#idChild{
position: relative;
left: 0;
top: 0;
background-color: ##lightskyblue;
border: thin solid ##black;
height: 100px;
width: 100px;
}
button{
margin: 0.5em 0 0 0;
width: 200px;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="idParent">
<div id="idChild"></div>
</div>
<button id="idAnimation"> Go Animation </button><hr>
<button id="idCQ"> clearQueue </button>
<script>...</script>
</body>
- 06-08: div id="idParent" (親要素です。)
- 07: div id="idChild" (子要素です。この要素がアニメーションします。)
- 09, 10: button (ボタンです。これらは id 値で指定したクリックイベントに関連付けられた関数を実行します。)
サンプルコード: script
<script>
let objOption = new Object();
objOption.duration = 500;
objOption.easing = "linear";
objOption.queue = true;
$("#idAnimation").click(function(){
$("#idChild").animate({"top":"100px"}, objOption);
$("#idChild").animate({"top":"100px", "left":"100px"}, objOption);
$("#idChild").animate({"top":"0", "left":"100px"}, objOption);
$("#idChild").animate({"top":"0", "left":"0"}, objOption);
});
$("#idCQ").click(function(){
$("#idChild").clearQueue();
});
</script>
- 02-11: アニメーションのキューの作成と実行 (詳細は animate() のページを参照願います。)
- 13: clearQueue() (キューは削除されます。しかし、今実行中のキューは止めることはできません。)
はじめに Go Animation のボタンをクリックして、アニメーションの動作を確認してください。
アニメーションが実行されている間に、clearQueue のボタンをクリックすることで動作を確認できます。
アニメーションを実行します。
実行中のキューを止めることはできませんが、キューは削除されるので、次に待機しているキューは実行されません。