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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR