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

    JavaScript

    jQueryで$.inArrayを使えば配列の中に指定した値が何番目に入ってるか知ることができる

    jQueryで配列の中に自分が指定した値が何番目にあるか知りたい場合は…

  2. JavaScript

    jQueryでCSSを複数の値で設定するやり方やクラスの追加や削減など色々

    jQueryのCSS操作で複数の値を渡したい時はハッシュ形式にすると便…

  3. jQuery Text Fade Delay
  4. sidebar-nav

    JavaScript

    ツリー型のサイドナビゲーションを実装できる「sidebar-nav」

    sidebar-navはツリー型でレスポンシブに対応したサイドナビゲー…

  5. Unite Gallery

    JavaScript

    レスポンシブな画像・動画ギャラリーを実装できる「Unite Gallery」

    Unite Galleryは、レスポンシブに対応した画像・動画ギャラリ…

コメント

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

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

最近の記事

  1. 十和田湖
  2. 富有柿
  3. アイリスオーヤマの加湿器
PAGE TOP