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メソッドだけでもかなり幅広いことができそうな感じです。今後もちょこちょこ弄りながら遊んでいきたいです。

ストライプ-ボーダーPhotoshopで超簡単にストライプ(ボーダー)をサクっと作るやり方前のページ

テーブルを綺麗なデザインにしてくれたり並び替え(ソート)もできるjQuery「tablesorter」次のページ

関連記事

  1. Popper.js

    JavaScript

    軽量で見やすいツールチップを実装できる「Popper.js」

    Popper.jsはユーザーにとって見やすいツールチップを実装できるJ…

  2. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

  3. Toast

    JavaScript

    アニメーション付きでスタッキングしていくメッセージ通知「Toast」

    Toastはアニメーション付きのメッセージ通知を表示することができるj…

  4. Flipster

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイン「Flipster」

    レスポンシブにも対応しているシンプルなカルーセルを実装できるjQuer…

  5. jsPanel

    JavaScript

    高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」

    jsPanelは高度なセッティングができるフローティングパネル、モーダ…

  6. JavaScript

    アイコンをクリックすると周りにメニューが表示されるjQueryプラグイン「FerroMenu」

    FerroMenuというjQueryプラグインを使えばアイコンをクリッ…

コメント

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

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

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP