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

JavaScript

jQueryの基本的なanimateメソッドを使って適当に遊んでみる

jQueryのanimateメソッドを使えば自分で好きなようにアニメーションを作ったりできるみたいなので試してみました。実際にちゃんと使ったことがなかったので勉強のためにどんな動きができるのかいくつかサンプルも作ったりしてみたんですが、思ったより簡単にできるのでとても便利ですね。まあ複雑なものは何一つ作ってないんであれなんですが。とりあえず超基本的な使い方を自分用にメモしときます。

[ads_center]

animateの使い方

まずは基本的な構文をということで、使い方はとても簡単で、以下のようにして使います。

$('セレクタ').animate({
    プロパティ: 値
});

例えば、widthの値が100pxの要素を200pxにアニメーションさせるにはこんな感じに指定してあげます。

$('#example').animate({
    width: 200
});

あと、気をつけたいのがfont-sizeなどといったハイフンで繋がれたプロパティを指定する場合にはそのまま書くのではなくクォーテーションで括るか、キャメル式で書くかのどちらかで記述する必要があるみたいです。

1. 'font-size': 15
2. fontSize: 15

それと、backgroundなど数値としての値がないものは指定できないみたいですね。ということでとりあえず適当にサンプルを作ってみたいと思います。以下、簡単なサンプルです。

サンプル

移動させる

実行をクリックすると要素が斜め下に移動します。リセットで元の位置に戻ります。


移動します
JavaScript
$(function(){
    $('#exe1').click(function(){
        $('#box1').animate({
            top: 200,
            left: 500,
        });
    });
    $('#reset1').click(function(){
        $('#box1').animate({
            top: 0,
            left: 0,
        });
    });
});
HTML
<div id="sample1">
    <input type="button" id="exe1" value="実行" />
    <input type="button" id="reset1" value="リセット" />
    <div id="box1">移動します</div>
</div>
CSS
#sample1 {
    border: 1px solid #ccc;
    padding: 20px;
    overflow: hidden;
}
#box1 {
    width: 100px;
    height: 100px;
    background: pink;
    padding: 10px;
    position: relative;
}

拡大させる

要素を拡大させたりします。


拡大します
JavaScript
$(function(){
    $('#exe2').click(function(){
        $('#box2').animate({
            width: 200,
            height: 200,
        });
    });
    $('#reset2').click(function(){
        $('#box2').animate({
            width: 100,
            height: 100
        });
    });
});
HTML
<div id="sample2">
    <input type="button" id="exe2" value="実行" />
    <input type="button" id="reset2" value="リセット" />
    <div id="box2">拡大します</div>
</div>
CSS
#sample2 {
    border: 1px solid #ccc;
    padding: 20px;
    overflow: hidden;
}
#box2 {
    width: 100px;
    height: 100px;
    background: pink;
    padding: 10px;
}

文字を大きくする


文字が大きくなります
JavaScript
$(function(){
    $('#exe3').click(function(){
        $('#box3').animate({
            fontSize: 17
        }, 200);
    });
    $('#reset3').click(function(){
        $('#box3').animate({
            'font-size': 12
        }, 200);
    });
});
HTML
<div id="sample3">
    <input type="button" id="exe3" value="実行" />
    <input type="button" id="reset3" value="リセット" />
    <div id="box3">文字が大きくなります</div>
</div>
CSS
#sample3 {
    border: 1px solid #ccc;
    padding: 20px;
}
#box3 {
    background: pink;
    padding: 10px;
    font-size: 12px;
}

移動した後に背景の色を変更する

左から右へ移動した後にコールバックで背景の色を変える指定をしています。逆に戻った後は背景を元に色に変更します。


移動した後に背景色を変えます
JavaScript
$(function(){
    $('#exe4').click(function(){
        $('#box4').animate({
            left: 500
        }, 1000, function(){
            $(this).css({
                background: 'red'
            });
        });
    });
    $('#reset4').click(function(){
        $('#box4').animate({
            left: 0
        }, 1000, function(){
            $(this).css({
                background: 'pink'
            });
        });
    });
});
HTML
<div id="sample4">
    <input type="button" id="exe4" value="実行" />
    <input type="button" id="reset4" value="リセット" />
    <div id="box4">移動しました後に背景色を変えます</div>
</div>
CSS
#sample4 {
    border: 1px solid #ccc;
    padding: 20px;
    overflow: hidden;
}
#box4 {
    width: 100px;
    height: 100px;
    background: pink;
    padding: 10px;
    position: relative;
}

左右のボックスが上下逆方向に移動する

左のボックスが真上に移動して、右のボックスが真下に移動します。移動した後は隠れていたテキストが表示されます。


サンプルテキスト

JavaScript
$(function(){
    $('#exe5').click(function(){
        $('#box5-2').animate({
            top: 120
        }, 1000);
        $('#box5-3').animate({
            top: -120
        }, 1000);
    });
    $('#reset5').click(function(){
        $('#box5-2').animate({
            top: 0
        }, 500);
        $('#box5-3').animate({
            top: 0
        }, 500);
    });
});
HTML
<div id="sample5">
    <input type="button" id="exe5" value="実行" />
    <input type="button" id="reset5" value="リセット" />
    <div id="box5">
        <div id="box5-1">サンプルテキスト</div>
        <div id="box5-2"></div>
        <div id="box5-3"></div>
    </div>
</div>
CSS
#sample5 {
    border: 1px solid #ccc;
    padding: 20px;
    overflow: hidden;
}
#box5 {
    width: 100px;
    height: 100px;
    background: pink;
    padding: 10px;
    position: relative;
    overflow: hidden;
}
#box5-2 {
    background: red;
    width: 60px;
    height: 120px;
    position: absolute;
    top: 0;
    left: 0;
}
#box5-3 {
    background: blue;
    width: 60px;
    height: 120px;
    position: absolute;
    top: 0;
    right: 0;
}

まとめ

なんか余計なコードとかありそうですがとりあえず手軽にこんな感じで色々と作れるのがいいですね。animateメソッドだけでもかなり幅広いことができそうな感じです。今後もちょこちょこ弄りながら遊んでいきたいです。

関連記事

  1. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

  2. PopSelect

    JavaScript

    タグ形式のセレクトボックスをポップオーバーで表示させる「PopSelect」

    PopSelectはタグ付けするような感覚のセレクトボックスをポップオ…

  3. jumboShare

    JavaScript

    SNSシェアボタンとジャンボサイズのカウンターを設置できる「jumboShare」

    jumboShareはSNSのシェアボタンとジャンボサイズのカウンター…

  4. Bootstrap Photo Gallery jQuery plugin
  5. jQuery TextFill

    JavaScript

    テキストをリサイズしてコンテナにフィットさせる「jQuery TextFill」

    jQuery TextFillはテキストをリサイズしてコンテナにフィッ…

  6. Optiscroll

    JavaScript

    縦横に対応したカスタマイズ性に優れたモダンなスクロールバー「Optiscroll」

    Optiscrollは、軽量で高度に最適化されたカスタマイズ性に優れた…

コメント

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

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

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP