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. jQuery Elastic Grid
  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachと$.eachの簡単な使い方のメモ

    jQueryのeachと$.eachの使い方のメモです。あんまり深い知…

  3. bcralnit.js
  4. Drooltip.js

    JavaScript

    拡張性の高い美しいツールチップを実装できる「Drooltip.js」

    Drooltip.jsは、美しくパワフルで拡張性の高いツールチップを実…

  5. socialShare.js
  6. Responsive Elements

コメント

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

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

最近の記事

  1. RF85mm F2 MACRO IS STM
  2. Anker PowerWave Pad Alloy
  3. Anker Bolder LC30
  4. BG-R10

アーカイブ

PAGE TOP