bl6.jp

jQueryでアニメーションが動作中の時だけ、またはアニメーションが停止中の時だけ何か処理をしたいっていう状況は結構あるかと思います。そんな時は指定するセレクタに:animatedや:not(:animated)を指定することでその時に応じた処理ができるようになります。とても便利ですね。以下使い方です。

[ads_center]

:animated / :not(:animated)

具体的な使い方のサンプルです。

HTML

<div id="sample">
    <p>sample</p>
</div>

JavaScript

$(function(){
    function animatelt(){
        $('#sample').slideToggle(3000, animatelt).delay(3000);
    }
    animatelt();

    $('#sample').toggle(function(){
        $('#sample:animated').css({
            background: "red"
        });
        $('#sample:not(:animated)').css({
            background: "yellow"
        });
    }, function(){
        $('#sample:animated').css({
            background: "blue"
        });
        $('#sample:not(:animated)').css({
            background: "green"
        });
    });
});

以下サンプルです。アニメーション動作中はクリックする度に背景が「赤」と「青」になります。逆にアニメーションが停止中には「黄」と「緑」になります。

サンプル

解説

必要ないかもですが一応解説です。クリックする度に何か処理をしたい場合にはtoggleを使います。以下のようにしてtoggleの第一引数と第二引数に各クリックイベントの処理を記述します。

$(セレクタ).toggle(function(){
    ・・・処理・・・
}, function(){
    ・・・処理・・・
});

で、サンプル中の各クリックイベントの中をさらに分岐すると以下になります。

1. アニメーション動作中→:animated
2. アニメーション停止中→:not(:animated)

toggleの第一引数、第二引数両方に上記の1,2の処理が記述されています。以下が各部分についてです。

アニメーション動作中

アニメーション動作中の処理は以下です。

// 1つ目
$('#sample:animated').css({
    background: "red"
});

// 2つ目
$('#sample:animated').css({
    background: "blue"
});

:animatedが指定されているので、アニメーション動作中の場合のみ実行されます。なのでここでは背景が「赤」と「青」をクリックする度に繰り替えされます。

アニメーション停止中

アニメーション停止中の処理は以下です。

// 1つ目
$('#sample:not(:animated)').css({
    background: "yellow"
});

// 2つ目
$('#sample:not(:animated)').css({
    background: "green"
});

今度は:not(:animated)を指定してあるのでアニメーション中ではない時の処理を記述しています。なので、停止中の場合のみ、クリックする度に背景を「黄」と「緑」を繰り替えします。

こんな感じで、アニメーション中はこっち、停止中はこっち、などといったことをやりたい時には役立つかと思います。けどそんな思うように単純にいかないとこが難しいんですけどね・・・。

参考サイト

:animated サンプル – jQuery 日本語リファレンス