jQuery Test Page

マウスオーバーで画像変更 その1

hover_off.pngとhover_on.pngという2つの画像を用意して、
_offと_onをswitchして表示を変更する。

例

コード

$(function(){
    $('#test1 img').hover(
        function(){
            $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
        },
        function(){
            if (!$(this).hasClass('current')) {
                $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
            }
        }
    );
});

コードの意味

hover時にimgタグのsrcの中の"_off"を"_on"に変更。
hoverが外れたらsrcの"_on"を"_off"に変更。

マウスオーバーで画像変更 その2

hover_off.pngのリンク背景にhover_on.pngを配置して、
マウスオーバー時にhover_off.pngを消すことで表示切り替えを行う。

例

コード

$(function(){
    $('#test2 img').hover(
        function(){
            $(this).fadeTo(500,0);
        },
        function(){
            $(this).fadeTo(500,1.0);
        }
    );
});

コードの意味

hover時にimgタグの部分を500msでフェードアウトする。
hoverが外れたらimgタグを500msでフェードインする。

マウスオーバーで画像変更 その3

hover_off.pngとhover_on.pngを縦にくっつけたhover.pngを用意。
CSSスプライトを使用し、画像の一部分のみを表示させて、
その画像を動かすことで表示の切り替えをする。

例

コード

$(function(){
    $('#test3 img').hover(
        function(){
            $(this).stop().animate({'marginTop':'-100px'}, 500);
        },
        function(){
            $(this).stop().animate({'marginTop':'0px'}, 500);
        }
    );
});

コードの意味

hover時に現在のアニメーションを全て中止し、
imgタグのCSS margin-topを-100pxに500msかけてアニメーションしながら変更する。
hoverが外れたら現在のアニメーションを全て中止し、
imgタグのmargin-topを0pxに500msかけてアニメーションしながら変更する。

アコーディオン

定義リストを利用した、クリックして開くメニュー。

例

カテゴリ1

サブ1｜サブ2｜サブ3｜サブ4

カテゴリ2

サブ1｜サブ2｜サブ3｜サブ4

カテゴリ3

サブ1｜サブ2｜サブ3｜サブ4

カテゴリ4

サブ1｜サブ2｜サブ3｜サブ4

コード

$(function(){
    $('#accordion dd').hide();
    $('#accordion dt a').click(function(){
        $('#accordion dd').slideUp();
        $(this).parent().next().slideDown();
        return false;
    });
});

コードの意味

1. id="accordion"の中のddタグを非表示にする
2. id="accordion"、dtタグのリンクがクリックされたら、
1. ddタグをスライドして上へ（閉じる）
2. クリックされたdtタグのすぐ下のddタグをスライドして下へ（開く）
3. クリックされたaタグのリンクは反映しない