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

    JavaScript

    スクロールイベントを実装できるモダンで軽量なJSライブラリ「scrollama.js」

    scrollama.jsは、スクロールイベントを実装することができるモ…

  2. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

  3. jRCarousel

    JavaScript

    モダンエフェクトなレスポンシブ対応のカルーセル実装「jRCarousel」

    jRCarouselはモダンエフェクトなカルーセルを実装できるjQue…

  4. jCorner

    JavaScript

    フラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」

    jCornerというjQueryプラグインを使ってみました。フラットデ…

  5. JavaScript

    2KB程の軽量&シンプルなjQueryスライダー「Craftyslide」を使ってみた

    とてもシンプルで軽量ないい感じのjQueryプラグイン「Craftys…

  6. jQuery Tags Input

    JavaScript

    シンプルでお洒落なタグを入力することができるjQueryプラグイン「jQuery Tags Inpu…

    とても便利で面白いjQueryプラグインがあったのでご紹介します。シン…

コメント

    • a3
    • 2013年 11月 07日

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

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

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP