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

JavaScript

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

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

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

サンプル

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

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

参考サイト

クールでプロフェッショナルなWordPressのテーマ50前のページ

jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する次のページjQueryでウィンドウサイズによって処理を変える

関連記事

  1. pull-to-reload

    JavaScript

    下へ引いてページをリフレッシュ(リロード)できる「pull-to-reload」

    pull-to-reloadは、Webページ内で下へ引くだけでページを…

  2. LuminJS

    JavaScript

    テキストを徐々にハイライトしていく「LuminJS」

    LuminJSはWebページ上のテキストを徐々にハイライトしていくJa…

  3. P-Loading

    JavaScript

    パワフルなローディングマスクを実装できるjQueryプラグイン「P-Loading」

    P-Loadingは、パワフルなローディングマスクを手軽に実装すること…

  4. How satisfied are you? Slider
  5. JavaScript

    テキストに滑らかに動くアニメーションをつけることができるjQueryプラグイン「animateTex…

    テキストに滑らかに動くかっこいいアニメーションをつけることができるjQ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP