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

関連記事

  1. JavaScript

    jQuery illuminateを使えばボタンに光を加え点滅させたりして注目させることができる

    ちょっと面白そうだったので使ってみました。jQuery illumin…

  2. Responsive Elements
  3. HCaptions

    JavaScript

    ホバー時に色々なエフェクトでキャプションをオーバーレイ表示できるjQueryプラグイン「HCapti…

    指定した要素をホバーすると色々なエフェクトでキャプションをオーバーレイ…

  4. Unicorn.js

    JavaScript

    ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」

    おもしろいプラグインがあったのでご紹介します。テキストにホバーするとレ…

  5. JavaScript

    マルチレベルで操作性に優れたレスポンシブ対応のjQueryナビゲーション

    レスポンシブに対応したマルチレベルの便利なjQueryナビゲーションが…

  6. Slight Submenu

コメント

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

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

最近の記事

  1. cheero Smart USB Charger 48W CHE-320
  2. ブエノカフェ CM-200

アーカイブ

PAGE TOP