【jQuery】クリック連打対策でstop()メソッドを利用する

animateメソッドのクリック連打対策でstop()メソッドを利用する。

stop()メソッドはjqueryのリファレンスによると、“指定した要素集合から、現在動作中のアニメーション処理を全て中止します。”とありますが、意味が分からず、いろいろテストしたのでメモしておきます。

stop([clearQueue], [gotoEnd])

■第1引数[clearQueue]
┗trueの場合、全てのキューをクリアする。
■第2引数[gotoEnd]
┗trueの場合、現在のアニメーションを最終コマまで移動する。

stop() == stop(false, false)

引数は2つで、何も指定しないデフォルトの状態では“false”が指定される。

⇒デモ

テスト1【stop()なし】

$(function(){
	$("#button1").click(function(){
		$(".block1").animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500);
	});
});


stop()なし

キューが削除されないので イベントが発生した回数分だけ実行される。

テスト2【stop() stop(false, false)】

$(function(){
	$("#button2").click(function(){
		$(".block2").stop(false, false).animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500);
	});
});


stop(false, false)

アニメーション実行時にクリックされた場合、現在のアニメーションを停止。
第一引数[clearQueue]がfalseのため次のキューに移行する。

テスト3【stop(false, true)】

$(function(){
	$("#button3").click(function(){
		$(".block3").stop(false, true).animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500);
	});
});


stop(false, true)

第二引数[gotoEnd]がtrueの場合、アニメーション実行時にクリックされた場合、現在のアニメーションを最終コマまで移動する。
第一引数[clearQueue]がfalseのため次のキューに移行する。

テスト4【stop(true, false)】

$(function(){
	$("#button4").click(function(){
		$(".block4").stop(true, false).animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500);
	});
});


stop(true, false)

第一引数[clearQueue]がtrueのため全てのキューをクリア。

テスト5【stop(true, true)】

$(function(){
	$("#button5").click(function(){
		$(".block5").stop(true, true).animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500);
	});
});


stop(true, true)

第一引数[clearQueue]がtrueのため全てのキューをクリア。
第二引数[gotoEnd]がtrueの場合、アニメーション実行時にクリックされた場合、現在のアニメーションを最終コマまで移動する。

テスト6【queue([]) + stop()】

アニメーション実行後にキューをクリアする方法

$(function(){
	$("#button6, .buttonAll").click(function(){
		$(".block6")
		.animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500, function(){
			$(".block6").queue([]);
			$(".block6").stop();
		});
	});
});


queue([]) + stop()

アニメーションが終わった後にqueueメソッド(キューの配列を空にしてアニメーションをキャンセル)を実行する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>