memorandum
thinking about creation

jQueryのstop()について

Entry Date _ 2016.05.10
/
ModifiedDate _ 2016.06.28

jQueryのanimateは、複数のアニメーションをキューとして連結して実行できるのが便利です。しかし、たとえばクリック・イベントによって、連結されたアニメーションを途中で中断したい時、当初アニメーションの処理を中止する「stop()」を実行すれば、アニメーションを停止して、登録してある最後のアニメーションのコールバックを返してくれると思っていたのですが、どうもうまくいきません。認識が間違っているようです。

調べてみると「stop()」は、まず現在実行中のアニメーションを止めて、次のアニメーション(ある場合には)を実行するもののようです。また、引数を指定することによってある程度コントロールできることがわかってきました。

概要は下記のようになります。

(1) 現在実行中のアニメーションを止めて、次のアニメーションを実行する。
stop(false, false) / stop()

(2) 現在実行中のアニメーションの最後にジャンプして、次のアニメーションを実行する。
stop(false, true)

(3) アニメーションを止める。
stop(true, false)

(4) 現在実行中のアニメーションを最後にジャンプして、アニメーションを止める。
stop(true,true)

つまり、第一引数は「アニメーションのキューをすべて破棄するか」で、第二引数は「現在実行中のアニメーションを最後にジャンプさせるか」ということになります。

簡単にテストできるものをつくってみました。

$('.box')
.animate({ opacity: 1 }, 3000, function(){
	console_demo("[anim1]callback -> opacity:1 end");
})
.animate({ left: "500px" }, 3000, function(){
	console_demo("[anim2]callback -> left:500px end");
})
.animate({ left: "0px" }, 3000, function(){
	console_demo("[anim3]callback -> left:0px end");
})
.animate({ opacity: 0.1 }, 3000, function(){
	console_demo("[anim4]callback -> opacity:0.2 end");
});
.box


Category

memorandum index