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. Pagination.js

    JavaScript

    シンプルでさまざまなカスタマイズが可能な「Pagination.js」

    Pagination.jsはシンプルでさまざまなカスタマイズが可能なペ…

  2. no-image

    JavaScript

    立体的なナビゲーションメニューを実装できる「Sidebar Menu Concept」

    Sidebar Menu Conceptは立体的なナビゲーションメニュ…

  3. jQuery.mousetip

    JavaScript

    マウスの動きや位置に追従してくるツールチップを実装できる「jQuery.mousetip」

    jQuery.mousetipはマウスの動きや位置に追従してくる軽量の…

  4. CSS3 Menu Slider
  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

    jQueryでHTML要素を追加するメソッドが色々あるので整理するため…

  6. Tiny slider

コメント

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

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

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP