dequeueとは
- ここで説明する dequeue とは次の語句からなるjQueryのメソッドです。
- dequeue
- 読み: デキュー
意味: キューから要素を取り出す操作の意。この場合、キューから離れるといった方が適切と思われる。
dequeueメソッドの概要
このメソッドは、現在実行中のキュー、または引数に設定した名前のキュー から要素を取り出し、かつ削除し、かつ離れ、次のキューがあれば、それに実行を移します。
dequeue() は queue() メソッドで関数を実行した場合に、次のキューに実行を移す際に必要になります。
冒頭の部分を補足すると、これは、キューから要素 (アニメーションや関数) を取り出し、かつ離れるだけであり、アニメーションや関数の処理そのものが削除されるわけではありません。 つまり、キューだけが削除されるので、そのキューに登録されていた処理は、ユーザーから見ると、あたかも同時に処理されているように見えるかもしれません。 アニメーションを削除、停止、または完了したい場合は、 stop() を使用してください。
構文
サンプルを見る前に構文を確認しておきます。
$(Selector).dequeue([queueName])- queueName: 省略可能な引数です。キューの名前を指定します。省略した場合には、デフォルト値の fx になります。
サンプルコードと実行結果
ここでは animate() と css() を キューに登録してみます。
animate() は CSS プロパティを変化させながら要素をアニメーションするためのメソッドです。 また、 css() は、CSS プロパティを設定するためのメソッドです。 これらのメソッドは CSS プロパティを操作しますが、アニメーションをするか、しないかの違いがあります。
概要のところでも述べているように、queue() の引数に animate() のようなアニメーションキューを発行するメソッドを指定した場合、キューの処理は連続的に移り進んでいきます。 しかし、アニメーションではない css() メソッドを関数の処理としてキューに追加した場合、 dequeue() を使って、そのキューを離れなければ、次のキューを実行することはできません。
サンプルコード: CSS
<style>
#idParent{
background-color: ##ivory;
padding: 10px;
height: 220px;
width: 96%;
}
#idDiv{
position: relative;
left: 0;
top: 0;
background-color: ##lightgreen;
border: thin solid ##lightgray;
padding: 19px;
height: 80px;
width: 80px;
}
</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="idDiv"> Element </div>
</div>
<button id="idButton">run animation</button>
<script>...</script>
</body>
- 06-08: div id="idParent" (親要素です。)
- 07: div id="idDiv" (子要素です。この要素がキューの実行によりアニメーションします。)
- 09: button id="idButton" (アニメーションを開始する為のボタンです。)
サンプルコード: script
<script>
let objOptions = new Object();
objOptions.duration = 600;
objOptions.easing = "swing";
$("#idButton").click(function(){
$("#idDiv").queue("myQueue", $("#idDiv").animate({"top":"100px"}, objOptions));
$("#idDiv").queue(
function(){
$("#idDiv").css({"background-color":"##lightpink"}).dequeue();
}
);
$("#idDiv").queue("myQueue", $("#idDiv").animate({"left":"300px"}, objOptions));
$("#idDiv").queue("myQueue", $("#idDiv").animate({"left":"0px"}, objOptions));
$("#idDiv").queue(
function(){
$("#idDiv").css({"background-color":"##lightgreen"}).dequeue();
}
);
$("#idDiv").queue("myQueue", $("#idDiv").animate({"top":"0px"}, objOptions));
});
</script>