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. Accordion.JS

    JavaScript

    クイックな開閉で使いやすいアコーディオン実装「Accordion.JS」

    Accordion.JSは、開閉の動作がクイックで使いやすいアコーディ…

  2. NO IMAGE
  3. shCircleLoader
  4. JUMBLE

    JavaScript

    テキストの色をカラフルにシャッフルさせるjQueryプラグイン「JUMBLE」

    JUMBLEというjQueryプラグインを使えば、指定したテキストの色…

  5. no-image

    JavaScript

    水平スクロールでテキストが流れていくマーキー実装「hMarquee」

    hMarqueeは、水平スクロールでテキストが滑らかに流れていくマーキ…

  6. vallenato.js

    JavaScript

    シンプルで実装も簡単なjQueryアコーディオン「vallenato.js」

    vallenato.jsは、シンプルで簡単に実装することができるjQu…

コメント

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

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

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP