queueとは
- ここで説明する queue とは次の語句からなるjQueryのメソッドです。
- queue
- 読み: キュー
意味: 列、並んで
queueメソッドの概要
このメソッドは、引数に設定したアニメーションキュー、または関数を処理の実行配列に格納します。
実行配列に格納されたアニメーションキューや関数は、その配列の順序通りに処理を進行していきます。 具体的にいうと 1番目にあるキューの処理が完了したら、2番目の処理を開始して、その処理が完了したら、3番目の処理を開始するということになります。
もしも、処理をキューに追加しないで、一連のコードを実行した場合、その処理は視覚的に連続したものではなく、ユーザーには、あたかも同時に処理されているように感じることもあります。 これを避けなければならないときに、このメソッドは有効です。
このメソッドの引数に アニメーションキューを設定した場合、キューは連続した処理を持続します。 しかし引数に関数を設定した場合、キューは その関数を実行した時点で停止してしまいます。 この場合、そのキューを削除することで次のキューに処理は移りますので、心配はいりません。
前述した 「このメソッドの引数に アニメーションキューを設定した場合、キューは連続した処理を持続します。 」 の部分の補足になりますが、 アニメーションキューは 処理が終わると自動的に削除され、次のキューを実行していきます。しかし関数は自動では削除されないので dequeue() を使って実行中のキューを離れる必要があります。
構文
サンプルを見る前に構文を確認しておきます。
var jqoQueue = $(Selector).queue([queueName]);
$(Selector).queue([queueName], newQueue);
$(Selector).queue([queueName], callback);
- queueName: 省略可能な引数です。キューの名前を指定します。省略した場合には、デフォルト値の fx になります。
- newQueue: キューに追加する任意のコードです。
- callback: キューに追加する任意の関数です。
サンプルコードと実行結果
ここでは show() 、 hide() 、 animate() と css() を キューに登録してみます。
show() 、 hide() 、 animate() は CSS プロパティを変化させながら要素をアニメーションするためのメソッドです。 また、 css() は、CSS プロパティを設定するためのメソッドです。 これらのメソッドは CSS プロパティを操作しますが、アニメーションをするか、しないかの違いがあります。
概要のところでも述べているように、queue() の引数に animate() のようなアニメーションキューを発行するメソッドを指定した場合、キューの処理は連続的に移り進んでいきます。 しかし、アニメーションではない css() メソッドの場合 キューとして直接の実行はできず、関数の処理として実行する必要があります。
サンプルコード: CSS
<style>
#idParent{
background-color: ##ivory;
padding: 10px;
height: 220px;
width: 96%;
}
#idDiv{
display: none;
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").show(objOptions));
$("#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));
$("#idDiv").queue("myQueue", $("#idDiv").hide(objOptions));
});
</script>
- 02: objOptions (アニメーションの設定をするために作成したオブジェクトです。詳しくは animate() のページを参照してください。)
- 06: .show(objOptions) (キューの引数にアニメーションの実行を指定しています。詳しくは show() のページを参照してください。)
- 07: .animate({"top":"100px"}, objOptions) (キューの引数にアニメーションの実行を指定しています。詳しくは animate() のページを参照してください。)
- 08-12: .queue(function(){関数の処理;}) (キューの引数に関数を指定しています。また関数の処理の最後には dequeue() を使ってキューを削除し次のキューに移行するようにしています。)
- 21: .hide(objOptions) (キューの引数にアニメーションの実行を指定しています。詳しくは hide() のページを参照してください。)