アニメーション中に追加のアニメーションを発生させない

問題

アニメーション中に追加のアニメーションが発生してしまった。
要素のアニメーション状態を判別し、処理を制御したい。

セレクタ内で:animatedを利用する。
※jQuery 1.2以降

セレクタ内で:animatedを使うと、アニメーション中の要素のみ、メソッドを実行できる。

次の例だとアニメーション中のdivのみスライドで表示on/offする。

$("div:animated").slideToggle();

:not(:animated)だと、アニメーション中でない要素のみ、メソッドを実行できる。

次の例だとアニメーション中でないdivのみスライドで表示on/offする。

$("div:not(:animated)").slideToggle();

li要素にマウスカーソルが入った時、アニメーション中でないul要素をスライドで表示on/offする。
mouseenterが複数回発生したとき、:not(:animated)によりslideToggle()の連発を防げる。

$(function() {
    $("li").on("mouseenter", function() {
        $("ul:not(:animated)").slideToggle();
    });
});

:animatedにすると、アニメーション中のみ追加のアニメーションを実行することができる。

$(function() {
    $("li").on("mouseenter", function() {
        $("ul:animated").slideToggle();
    });
});