not(“:animated”)とstop()の使い分けについて〜jQuery

not(“:animated”)とstop()の使い分けについて説明します。

:not(:animated)は、アニメーション中ではない時にアニメーションの命令を受け付けることです。
従って、現在行っているアニメーションは最後まで実施されます。しかし、そのアニメーション中にはアニメーションの処理を受け付けません。
stop()は現在実行しているアニメーションをすぐに停止することです。従ってアニメーションは途中で止まります。その後再びイベントがあれば中断した途中からアニメーションが始まります。

具体例のサンプル hover()を使った例

hover()とnot(“:animated”)を使ったアニメーションsample2

<div class="first">No1</div>

not(“:animated”)を使ったアニメーションのコード

$(function(){
  $(".first").hover(function(){
	$(this).not(":animated").animate({'width':'400px'})},
  function(){
	$(this).not(":animated").animate({'width':'200px'})
  })
})

stop()を使ったアニメーションのコード

$(function(){
  $(".first").hover(function(){
	$(this).stop().animate({'width':'400px'})},
  function(){
	$(this).stop().animate({'width':'200px'})
  })
})

このサンプルはマウスがdiv（NO1のピンクの長方形）に重なるとdivの横幅がアニメーションしながら伸び、マウスが外れるとdivの横幅が縮んで元のサイズに戻るものです。

結果はサンプルで操作してみると判りますが、sample1ではマウスをdivに重ねたり外したりを素早く何度も続けたらマウスを止めたときにdivは何度も伸びたり縮んだりを繰り返します。

sample2のように「.not(“:animated”)」を使用すると今度は不具合が出ます。マウスをdivに重ねたり外したりを素早く何度も続けたらdivの横幅は伸びたまま止まってしまいます。
これはマウスを対象から外した瞬間に、今度は横幅が縮むアニメーションを行う命令になっていますが、まだdivの横幅がアニメーションしながら伸びる途中（つまりアニメーションの途中）のためマウスが外れた時のイベントが受け付けられないのです。そのためdivの横幅が伸びるアニメーションが終了すると長くなったまま止まってしまう結果になります。

一方のstop()では、マウスが外れるとdivの横幅が伸びるアニメーションはそこで中断されます。そしてマウスが外れると今度はdivの横幅が縮んで元のサイズになるまでアニメーションを行います。

hover（）のようなイベントのときには.not(“:animated”)を使わずに、stop()を使用することで問題を防ぐことができます。