jQueryでアニメーション動作中と停止中で処理を分ける:animatedと:not(:animated)を使ってみる

jQueryでウィンドウサイズによって処理を変える

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

: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"
        });
    });
});

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

サンプル

sample

解説

必要ないかもですが一応解説です。クリックする度に何か処理をしたい場合には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)を指定してあるのでアニメーション中ではない時の処理を記述しています。なので、停止中の場合のみ、クリックする度に背景を「黄」と「緑」を繰り替えします。

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

参考サイト

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives