jQueryを使ってイベント処理と合わせてアニメーション処理をスクリプトを組む際に、
指定する要素がアニメーション実行中かそうでないか判別をする場面がよくあります。

アニメーションの実行判別方法はいろいろなやり方があり
使用する場面によって使い分けるのですが、たまに書き方を忘れてしまうので
いくつかの判別パターンをまとめてみます。

【.is(‘:animated’)】
jQueryで要素がアニメーション実行中かそうでないかを判別する処理

いろいろある判別処理の中で扱いやすかったものとして
まず、if文と「.is(‘:animated’)」を使っての判別について。

「.is(‘:animated’)」を使って
要素がアニメーション実行中の場合の処理は以下のようになります。

◆SCRIPT
if($('セレクタ').is(':animated')){
	~ ここにセレクタ要素がアニメーション実行中の場合の処理を記述 ~
}

アニメーションが実行中の場合と実行中でない場合の処理を分岐するには
以下のようになります。

◆SCRIPT
if($('セレクタ').is(':animated')){
	~ ここにセレクタ要素がアニメーション実行中の場合の処理を記述 ~
} else {
	~ ここにセレクタ要素がアニメーション実行中ではない場合の処理を記述 ~
}

要素がアニメーション実行中ではない場合のみ判別するには
以下のようになります。

◆SCRIPT
if(!($('セレクタ').is(':animated'))){
	~ ここにセレクタ要素がアニメーション実行中ではない場合の処理を記述 ~
}

セレクタ要素には「’div’」や「’span’」などのHTMLタグ自体を対象にすることや
ID「’#elements’」やクラス「’.elements’」を指定することも可能です。

【.not(‘:animated’)】
jQueryで要素がアニメーションではない場合を判別する

もっとシンプルにアニメーション中ではない場合のみを判別するには
「.not()」メソッドで「.not(‘:animated’)」を使います。

「.not(‘:animated’)」を使って
要素がアニメーション実行中ではない場合の処理は以下のようになります。

◆SCRIPT
$('セレクタ').not(':animated').click(function(){
	~ ここにセレクタ要素がアニメーション実行中ではない場合の処理を記述 ~
});

セレクタ要素がアニメーション実行中は処理させない場合に使用します。
(「.not(‘:animated’)」の後ろは「.click()」ではなくても他のメソッドでも大丈夫です。)

【:not(:animated)】
jQueryで要素がアニメーションではない場合を判別する

最後に、アニメーション中ではない場合の判別で
セレクタ自体にnot処理をつけるには「:not(:animated)」を使います。

「:not(:animated)」を使って
要素がアニメーション実行中ではない場合の処理は以下のようになります。

◆SCRIPT
$('セレクタ:not(:animated)').click(function(){
	~ ここにセレクタ要素がアニメーション実行中ではない場合の処理を記述 ~
});

セレクタ名に続けて「:not(:animated)」を追加することで
セレクタ要素がアニメーション実行中ではない場合のみ処理になります。
(セレクタの後ろは「.click()」ではなくても他のメソッドでも大丈夫です。)

以上がjQueryで特定の要素がアニメーション実行中かそうでないかを
判別する処理についてのまとめでした。

アニメーションを判別させるやり方は様々な方法がありますが
状況によって使い分けるといいかと思っています。

jQueryで特定の要素がアニメーション実行中かそうでないかを判別する際にぜひ。。。