jQueryの.is()で特定要素がアニメーション中かどうか調べる方法

2014.5.6

以前、「jQueryで.animate()のバッファを貯めない為にアニメーション中は誤動作させない方法 | 1bit::memo」という記事を書きました。要素自身のアニメーション状態をしらべるにはこれで問題ないのですが、アニメーションの状態によって別要素の挙動を制御したい方法が分からなかったので、調べてメモ。

コード

if( !$('.elements').is(':animated') ){
    //アニメーションしていなかった時の処理
}else{
    //アニメーション中の時だった場合の処理
}

解説

上記のコードの通り、.is()を使う事で、指定要素の状態を調べることができます。それを元にif文で判別しているわけです。

ちなみに、上記コードはなぜ否定形（!）となっているかというと、ボタンを連続クリックした時には反応してほしくないため、このような書き方をしているのです。実際にはelse以降は不要で、以下の用に使う事を想定しています。

コード

if( !$('.elements').is(':animated') ){
    //アニメーションしていなかった時の処理
}

最後に

この方法であれば、後からコードを見返したときにif文で判断をしている事が分かりやすいですし、自身要素の場合、別要素の場合で書き方をかえる必要がないですね。
今回.is()はアニメーション中かどうかを調べるために使いましたが、.is()は、これ以外にもかなり応用範囲の広い命令っぽいですね。