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で特定の要素がアニメーション実行中かそうでないかを判別する際にぜひ。。。