finish とは
- ここで説明する finish とは次の語句からなる jQuery のメソッドです。
- finish
- 読み: フィニッシュ
意味: 終える、済ます、完了する
finish メソッドの概要
このメソッドは、呼び出し元に登録されている全てのキューを終了します。
アニメーションキューの場合は、アニメーションの完了位置に移動します。
構文
サンプルを見る前に構文を確認しておきます。
$(Selector).finish([queueName])- queueName: 省略可能な引数です。キューの名前を指定します。省略した場合には、デフォルト値の fx になります。
サンプルコードと実行結果
ここでは、div 要素の親子をサンプルとしてみました。
サンプルでは、親 div の内周を 子 div が周回するアニメーションを作成するために、4つの animate() メソッドを使ってアニメーションのキューを作成しています。
キューに追加されたアニメーションは、1つのアニメーションが完了した時点で次のキューを開始するといった形式で、 実行されていきます。
このサンプルはアニメーションのキューを finish() を使って終了します。
サンプルコード: 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="idFinish"> finish </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);
});
$("#idFinish").click(function(){
$("#idChild").finish();
});
</script>
- 02-11: アニメーションのキューの作成と実行 (詳細は animate() のページを参照願います。)
- 13: finish() (キューは終了し、アニメーションは完了位置に移動します。)
はじめに Go Animation のボタンをクリックして、アニメーションの動作を確認してください。
アニメーションが実行されている間に、finish のボタンをクリックすることで動作を確認できます。
アニメーションを実行します。
実行中のキューを含む全てのキューを終了し、キューの完了位置に移動します。