jQueryで.animate()のバッファを貯めない為にアニメーション中は誤動作させない方法

2014.5.4

jQueryを使ったアニメーションでよくあるのが、「ボタンを連打するとアニメーションのバッファが溜まってしまい、遅れてアニメーションが起きてしまう現象」。このバッファを貯めないために、アニメーション中は誤動作しないようにする方法をメモ。

not:animatedを使う

結論から書くと、「not:animated」を使います。

$('#element:not(:nanimated)').animate({
    //ここにanimateの処理
});

または

$('#element').not(':animated').animate({
    ここにanimateの処理
});

どちらも同じ挙動です。書き方がいろいろあるのがjQueryの便利な所のような、ややこしい所のようなｗ