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

JavaScript

jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる

すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人ながら作ってみます。ある要素、例えばa要素なんかにマウスオーバーした時にちょっとだけ拡大して強調させたいなどといった時に使えるかもしれません。分かりづらそうなのでサンプルも作ってみました。おかしい部分やもっとこうした方がいいみたいなことがあれば是非教えていただけるとうれしいです。
(※ CSS3だけでもできましたので追加しておきます。)

[ads_center]

要素を全体的に拡大

CSSのtransitionを使って背景色もアニメーションで変わるようにしています。要素の拡大はjQueryのanimateを使ってpaddingの値を変えています。で、普通にpaddingの値だけ変えると左上が固定されて右下方向だけアニメーションして拡大していくので、拡大する分positionでマイナスの値も指定します。ちょっと分かりずらいので図にするとこんな感じです。

全体的に拡大

なので、要素全体にpaddingを10px追加して拡大したい場合はtopとleftにpositionの値-10を指定することで全体が均一に拡大するように見せています。以下、コードです。

HTML

<div id="sample">
    <a href="#">Sample</a>
</div>

CSS

#sample {
    width: 100px;
    height: 100px;
    margin: 30px;
    position: relative;
}
#sample a {
    background: #06F;
    color: #fff;
    font-size: 13px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    display: block;
    text-align: center;
    text-decoration: none;
    position: absolute;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
}
#sample a:hover {
    background: #0FF;
}

JavaScript

$(function(){
    // mouseover時の値
    var mouse_on = {
        top: -10,
        left: -10,
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 10,
        paddingRight: 10,
        fontSize: 20
    }
    //mouseout時の値
    var mouse_off = {
        top: 0,
        left: 0,
        paddingTop: 0,
        paddingBottom: 0,
        paddingLeft: 0,
        paddingRight: 0,
        fontSize: 13
    }
	
    $('#sample a').hover(function(){
        $(this).animate(mouse_on, 200);
    }, function(){
        $(this).animate(mouse_off, 200);
    });
});

IEはtransitionに対応していないっぽいので背景色はアニメーションなしでパッと切り替わります。すごい基礎的なことしかしてないですが、手軽に色々なことができるので楽しいですね、jQuery。

追記

すいません、CSS3だけでもできました。というかtransition複数指定するだけで普通にいきますね。以下CSSだけのサンプルです。

サンプル(CSS3)

以下コードです。

HTML

<div id="sample">
    <a href="#">Sample</a>
</div>

CSS

#sample {
    width: 100px;
    height: 100px;
    margin: 30px;
    position: relative;
}
#sample a {
    background: #06F;
    color: #fff;
    font-size: 13px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    display: block;
    text-align: center;
    text-decoration: none;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition:
        background-color 0.2s linear,
        padding 0.2s linear,
        top 0.2s linear,
        left 0.2s linear,
        font-size 0.2s linear;
    -moz-transition:
        background-color 0.2s linear,
        padding 0.2s linear,
        top 0.2s linear,
        left 0.2s linear,
        font-size 0.2s linear;
    -o-transition:
        background-color 0.2s linear,
        padding 0.2s linear,
        top 0.2s linear,
        left 0.2s linear,
        font-size 0.2s linear;
    transition: 
        background-color 0.2s linear,
        padding 0.2s linear,
        top 0.2s linear,
        left 0.2s linear,
        font-size 0.2s linear;
}
#sample a:hover {
    background: #0FF;
    top: -10px;
    left: -10px;
    padding: 10px;
    font-size: 20px;
}

関連記事

  1. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

  2. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

  3. jQuery-LightBox

    JavaScript

    軽量でモバイルフレンドリーなLightbox実装「jQuery-LightBox」

    jQuery-LightBoxは、軽量でレスポンシブにも対応したモバイ…

  4. Easy Responsive Tabs to Accordion

    JavaScript

    レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsi…

    今すぐにでも使いたいjQueryプラグインを見つけたので備忘録。レスポ…

  5. Frappe Charts

    JavaScript

    シンプルでモダンなSVGチャートを実装できる「Frappe Charts」

    Frappe Chartsは、シンプルでモダンなSVGチャート(グラフ…

  6. Line Maker

    JavaScript

    アニメーションするラインを実装できる「Line Maker」

    Line Makerは、いろんなアニメーションをするラインを実装するこ…

コメント

    • a3
    • 2013年 11月 07日

    sample、サンプルじゃない;;

    • サイトをリニューアルした時におかしくなってしまったようです…
      削除しておきました。ご指摘ありがとうございます。

最近の記事

  1. F7U070bt
  2. 生きている玄米と玄米酵素ブレンド雑穀
  3. BOOST↑CHARGE Apple Watch用モバイルバッテリー

アーカイブ

PAGE TOP