WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

jQueryで要素がアニメーション実行中かそうでないかを判別する処理まとめ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コメントを残す

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