jQuery: stop (ストップ) の解説 | 独学 Webプログラミング!

stopとは

stop: 読み: ストップ
意味: 止める

目次に戻る

stopメソッドの概要

このメソッドは、現在実行中のアニメーションを停止、または削除します。

メソッドの第一引数の設定により、アニメーションのキューは停止、又は削除され、第二引数の設定により、アニメーションの完了ポイントに移るか否かを指定することができます。

アニメーションのキューが削除された場合、次のキューがあれば、実行はそのキューに移されます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

$(Selector).stop([clearQueue] [, jumpToEnd ]);
$(Selector).stop([queue] [, clearQueue] [, jumpToEnd]);

clearQueue : キューをストップするか、削除するかを真偽値で指定します。
　(true = ストップ) (false = 削除)
jumpToEnd : 実行中のキューを完了とするか否かを指定します。
　(true = 完了) (false = 保持)
queue : キューの名前を文字値で指定します。これは queue メソッドを使ってキューを特定できる名前がある場合にのみ有効です。

メソッドの引数を指定しない場合は、既定値の (false, false) となります。

目次に戻る

サンプルコードと実行結果

ここでは、div 要素の親子をサンプルとしてみました。

サンプルでは、親 div の内周を子 div が周回するアニメーションを作成するために、4つの animate() メソッドを使ってアニメーションのキューを作成しています。

キューに追加されたアニメーションは、1つのアニメーションが完了した時点で次のキューを開始するといった形式で、実行されていきます。

このサンプルはアニメーションのキューを stop() を使って停止したり、削除したりすることを自身で操作できるように設計しています。

サンプルコード: 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="idStopFF">stop(false, false)</button><hr>
	<button id="idStopTF">stop(true, false)</button><hr>
	<button id="idStopTT">stop(true, true)</button><hr>
	<button id="idStopFT">stop(false, true)</button>
	<script>...</script>
</body>

06-08: div id="idParent" (親要素です。)
07: div id="idChild" (子要素です。この要素がアニメーションします。)
09, 10, 11, 12, 13: button (ボタンです。これらは id 値で指定したクリックイベントに関連付けられた関数を実行します。)

サンプルコード: script

<script>
	let objOption = new Object();
	objOption.duration = 2000;
	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);
	});
	$("#idStopFF").click(function(){
		$("#idChild").stop(false, false);
	});
	$("#idStopTF").click(function(){
		$("#idChild").stop(true, false);
	});
	$("#idStopTT").click(function(){
		$("#idChild").stop(true, true);
	});
	$("#idStopFT").click(function(){
		$("#idChild").stop(false, true);
	});
</script>

02-11: アニメーションのキューの作成と実行 (詳細は animate() のページを参照願います。)
13: stop(false, false) (実行中のキューは削除され、その場で次のキューに移ります。)
16: stop(true, false) (実行中のキューは停止します。)
19: stop(true, true) (実行中のキューは停止し、アニメーションは完了位置にジャンプします。)
22: stop(false, true) (実行中のキューは削除され、アニメーションは完了位置にジャンプします。)

実行結果:
はじめに Go Animation のボタンをクリックして、アニメーションの動作を確認してください。次に Go Animation をクリックして、アニメーションが実行されている間に、他のボタンをクリックすることで動作を確認できます。ボタンに表記されている設定で stop() が実行されますので自身の目で動作を確認してください。また、アニメーションが停止している状態なら、再度 Go Animation をクリックすることで、アニメーションは再開されます。アニメーションを実行します。実行中のキューは削除され、次のキューに移ります。実行中のキューは停止します。実行中のキューは停止し、アニメーションは完了位置にジャンプします。実行中のキューは削除され、アニメーションは完了位置にジャンプします。

目次に戻る

Title

実行中のアニメーションを停止、または終了する

目次 (INDEX)

stopとは

stopメソッドの概要

構文

サンプルコードと実行結果