jQueryのstopとfinishを使ってみる

jQueryのstopとfinishの使い方を見てみます。

stopで引数なしの場合

2点間を片道1.5秒かけて往復するアニメーションをsetIntervalで3.5秒毎に行う処理を作成して、アニメーション中にstopを実行するとどうなるかを試してみます。

HTML

<button id="btn">stop()</button>
<div id="sample"></div>

CSS

#sample {
	position: absolute;
	top: 100px;
	left: 0;
	width: 100px;
	height: 100px;
	background: #cccccc;
}

JavaScript

$(function() {
	setInterval(function() {
		$('#sample').animate({
			left: 300
		}, 1500).animate({
			left: 0
		}, 1500);
	}, 3500)

	$('#btn').on('click', function() {
		$('#sample').stop();
	});
});

引数なしのデモページ
stopを実行した時点に行っているアニメーションが終了して、その場から次のキューが開始されます。
　

stop(false, false)

引数を設定する場合、第一引数はstop実行時に持っているキューをすべて削除するかどうか、第二引数は現在のアニメーションを最後までスキップするかどうかになります。
引数はそれぞれtrueかfalseで設定で、初期値はfalseです。

第一引数、第二引数共にfalseを設定してみます。

JavaScript

$(function() {
	setInterval(function() {
		$('#sample').animate({
			left: 300
		}, 1500).animate({
			left: 0
		}, 1500);
	}, 3500);

	$('#btn').on('click', function() {
		$('#sample').stop(false, false);
	});
});

stop(false, false)のデモページ
引数なしのときと同じ挙動になります。
　

stop(true, false)

第一引数にtrue、第二引数にfalseを設定してみます。

JavaScript

$(function() {
	setInterval(function() {
		$('#sample').animate({
			left: 300
		}, 1500).animate({
			left: 0
		}, 1500);
	}, 3500);

	$('#btn').on('click', function() {
		$('#sample').stop(true, false);
	});
});

stop(true, false)のデモページ
現在持っているキューをすべて削除して、その場で停止します。
setIntervalで再度実行されると、その場からアニメーションが開始されます。
　

stop(false, true)

第一引数にfalse、第二引数共にtrueを設定してみます。

JavaScript

$(function() {
	setInterval(function() {
		$('#sample').animate({
			left: 300
		}, 1500).animate({
			left: 0
		}, 1500);
	}, 3500);

	$('#btn').on('click', function() {
		$('#sample').stop(false, true);
	});
});

stop(false, true)のデモページ
stopを実行した時点で行っているアニメーションを最後までスキップして、次のキューが開始されます。
　

stop(true, true)

第一引数、第二引数共にtrueを設定してみます。

JavaScript

$(function() {
	setInterval(function() {
		$('#sample').animate({
			left: 300
		}, 1500).animate({
			left: 0
		}, 1500);
	}, 3500);

	$('#btn').on('click', function() {
		$('#sample').stop(true, true);
	});
});

stop(true, true)のデモページ
現在持っているキューをすべて削除して、stopを実行した時点で行っているアニメーションの最後までスキップして停止します。
setIntervalで再度実行されると、その場からアニメーションが開始されます。
　

finish()

stopに似た挙動をするfinishを試してみます。

JavaScript

$(function() {
	setInterval(function() {
		$('#sample').animate({
			left: 300
		}, 1500).animate({
			left: 0
		}, 1500);
	}, 3500);

	$('#btn').on('click', function() {
		$('#sample').finish();
	});
});

finish()のデモページ
現在持っているキューをすべて破棄して停止します。
stopの場合はその場で停止するか、stopを実行した時点で行っているアニメーションの最後にスキップでしたが、finishの場合は現在持っているキューの最後にスキップします。
　

【参考サイト】

• .stop() | jQuery 1.9 日本語リファレンス | js STUDIO
• .finish() | jQuery 1.9 日本語リファレンス | js STUDIO
• [jQuery]こんな機能があったんだ。jQuery stop() | WEBプログラム覚書
• jQueryのstopメソッドとfinishメソッド – to-R