jQuery 「エフェクト」視覚効果のキューを操作する
.animate()メソッドを連続して実行すると、それぞれのアニメーション効果は「キュー（queue）」に登録され、順に実行されます。キューはDOM要素ごとに１つまたは複数持てますが、複数のキューが必要になることはほとんどないでしょう。jQueryでは、特に指定しない限り、視覚効果には「fx」という名前のキューを使用します。.queue()メソッドは、引数を省略、またはキュー名だけを指定した場合、既存のキューの内容を引数の配列に含まれる関数で置き換えます。コールバック関数を指定した場合、キューの最後に指定した新しい関数を追加できます。.dequeue()メソッドは、キューから関数を１つ取り出し、実行します。.clearQueue()メソッドは、キューからすべての関数を削除します。アニメーション効果に関するキューに限定すれば、.stop(true)を実行するのとほぼ同義です。.delay()は、キューの関数と関数の間の待ち時間を指定します。
書式
$("対象要素").queue([キュー名]);
$("対象要素").queue([キュー名] 関数の配列 );
$("対象要素").queue([キュー名] コールバック );
$("対象要素").dequeue([キュー名]);
$("対象要素").clearQueue([キュー名]);
$("対象要素").delay(待ち時間,[キュー名]);$('div').queue();
$('div').queue('fx', []);
$('div').queue('fx', function(){処理…});
$('div').dequeue();
$('div').clearQueue();
$('div').delay(3000);サンプル
animate()メソッドはdiv要素を移動させる。.queue()メソッドで上に記述したアニメーションが終了したら次のアニメーションを実行するよう記述しているため、1つ目の.click()メソッド内の処理が完了した後に、.queue()メソッドが実行されます。動きとして、青い正方形のdiv要素が左から200px、上から100px移動した後div要素の背景色（backgroundColor）が赤色に変わります。「クリア」ボタンをクリックする.clearQueue()メソッドによりアニメーションが途中で終了し、再度スタートボタンをクリックするとまたはじめからアニメーションが行われます。
<html>
<head>
<meta charset="UTF-8">
<title>テストページ</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<style>
div{
position: absolute;
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<button id="start">スタート</button>
<button id="clear">クリア</button>
<div></div>
<script>
$(document).ready(function(){
$("#start").on('click',function(e){
$("div").css("backgroundColor", "blue");
$("div").animate({left: '+=200px'},1500);
$("div").delay(1000);
$("div").animate({top: '+=100px'},400);
$("div").delay(3000);
$("div").queue(function(){
$("div").css("backgroundColor","red");
$("div").dequeue();
});
});
$("#clear").on('click',function(){
$("div").clearQueue();
});
});
</script>
</body>
</html>
