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;
}

シンプルで使いやすいベーシックなスライドショーを実装できるjQueryプラグイン「Basic jQuery Slider」前のページ

滑らかに流れるニュースティッカー「jQuery News Ticker」がとてもいい次のページ

関連記事

  1. Unite Gallery

    JavaScript

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

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

  2. Footnoted

    JavaScript

    脚注(注釈)を入れたい時に役立つjQueryプラグイン「Footnoted」

    FootnotedというjQueryプラグインは文章の中に脚注(注釈)…

  3. Pushbar.js

    JavaScript

    スライドでコンテンツを引き出せる「Pushbar.js」

    Pushbar.jsはスライドでコンテンツやナビゲーションメニューを引…

  4. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  5. jQuery Hero Slider Plugin
  6. jQuery LoadingOverlay

    JavaScript

    多彩なローディング画面を実装できる「jQuery LoadingOverlay」

    jQuery LoadingOverlayは、カスタマイズ性に優れた多…

コメント

    • a3
    • 2013年 11月 07日

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

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

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP