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. no-image

    JavaScript

    フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

    Character Limitは、フォーム要素に文字制限を設定するため…

  2. Zoomerang.js
  3. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

  4. Prism Effect Slider

    JavaScript

    プリズム効果を実装することができるスライダー「Prism Effect Slider」

    おもしろいスライダーがあったのでご紹介します。Prism Effect…

  5. stickyTableColumns

    JavaScript

    水平(左右)にスライドできるテーブル実装「stickyTableColumns」

    stickyTableColumnsは、データ量の多い表をページで表現…

  6. no-image

コメント

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

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

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP