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

JavaScript

jQueryでsetTimeoutを使えば各要素のアニメーションを実行させる時間を調整できる

jQueryのsetTimeoutを使えば何秒後に実行するかといったことができるようになります。例えば、この要素は○秒後に実行、あの要素は○秒後に実行といった感じで何気に使う機会が出てきそうな感じですね。今後のためにもサンプル的なものも作って残しておきます。

[ads_center]

setTimeoutの使い方

以下のようにして使います。

setTimeout(function() {
    ・・・処理・・・
}, ミリ秒);

以下は実行ボタンをクリックするとsample1から順番にすべて1秒後に移動し始めるサンプルです。移動後の処理はanimateのコールバック関数にsetTimeoutを使って時間をずらすようにしています。

サンプル


sample1
sample2
sample3

HTML

<input type="button" value="実行" id="sample-run">
<input type="button" value="リセット" id="sample-reset">
<div id="sample-wrap">
    <div class="sample1">sample1</div>
    <div class="sample2">sample2</div>
    <div class="sample3">sample3</div>
</div>

CSS

#sample-wrap {
    border: 1px solid #ccc;
    width: 600px;
    height: 600px;
    line-height: 600;
    margin: 20px auto;
    position: relative;
}
.sample1,
.sample2,
.sample3 {
    background: #06F;
    color: #fff;
    width: 100px;
    height: 100px;
    margin: 20px;
    line-height: 100px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    position: absolute;
}
.sample1 {
    top: 0;
    left: 0;
}
.sample2 {
    top: 120px;
    left: 0;
}
.sample3 {
    top: 240px;
    left: 0;
}

JavaScript

$(function(){
    function animateValue(top, left){
        var animate_value = {
            top: top,
            left: left
        };
        return animate_value;
    };

    $('#sample-run').click(function(){
        setTimeout(function(){
            $('.sample1').animate(animateValue(120, 120), 2000, function(){
                setTimeout(function(){
                    $('.sample2').animate(animateValue(240, 240), 2000, function(){
                        setTimeout(function(){
                            $('.sample3').animate(animateValue(120, 360), 2000);
                        }, 1000);
                    });
                }, 1000);
            });
        }, 1000);
    });

    $('#sample-reset').click(function(){
        $('.sample1, .sample2, .sample3').stop();
        $('.sample1').animate(animateValue(0, 0), 1000);
        $('.sample2').animate(animateValue(120, 0), 1000);
        $('.sample3').animate(animateValue(240, 0), 1000);
    });
});

WordPressでシェアする為のプラグインベスト10前のページ

jQueryでパターン化されたクラス名をループで1つずつ取り出して処理する次のページjQueryでウィンドウサイズによって処理を変える

関連記事

  1. nanogallery2

    JavaScript

    美しくてハイクオリティなイメージギャラリーを実装できる「nanogallery2」

    nanogallery2はパーソナルニーズにピッタリなイメージギャラリ…

  2. no-image

    JavaScript

    ミニマリスティックでフレキシブルなjQueryスライダー「Bore Bones Slider」

    Bore Bones Sliderはミニマリスティックでフレキシブルな…

  3. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

  4. Nivo Zoom

    JavaScript

    Lightbox風に画像をズームして表示させるjQueryプラグイン「Nivo Zoom」

    Lightbox風に画像をズームして表示させるjQueryプラグイン「…

  5. JavaScript

    1つのテキストリンクから複数のリンク先が表示される「μllinx」

    μllinx(mullinx)は1つのテキストリンクから複数のリンク先…

  6. Zoomify

    JavaScript

    画像ズーム効果によるシンプルなライトボックスを実装できる「Zoomify」

    Zoomifyは、画像のズーム効果を備えたシンプルなライトボックスのた…

コメント

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

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

最近の記事

  1. セミの抜けがら
  2. Nikeスポーツバンド(アンスラサイト/ブラック)
  3. COMOLI 和紙コットンリストバンド
  4. スターバックス インドネシア アチェ
  5. ベーコンとほうれん草のキッシュ

アーカイブ

PAGE TOP