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
  2. Animate Transition
  3. formBuilder

    JavaScript

    ドラッグ&ドロップでフォームを手軽につくれる「formBuilder」

    formBuilderはドラッグ&ドロップでフォームを手軽につくること…

  4. CurvedText

    JavaScript

    曲線上にテキストを配置できるjQueryプラグイン「CurvedText」

    CurvedTextというjQueryプラグインを使えば、任意の曲線上…

  5. Enllax.js

    JavaScript

    軽量で簡単なパララックスを実装できるjQueryプラグイン「Enllax.js」

    Enllax.jsは軽量で使い方も簡単なパララックスエフェクトを実装す…

  6. FractionSlider

    JavaScript

    各要素ごとにスライドアニメーションを設定できるjQueryプラグイン「FractionSlider」…

    複数の各要素ごとにスライドアニメーションを設定できるjQueryプラグ…

コメント

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

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

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP