【jQuery】イメージをふわっと切り替えるJS

石田さん用

by tea4two

HTML

<script type="text/javascript">
var $shID = '対象となるIDかクラス名を書く';
</script>

<ul id="gnav" class="cf">
            <li><a href="/" id="gnTop"><span>メニュー1</span></a></li>
            <li><a href="/about/" id="gnAbout"><span>メニュー2</span></a></li>
            <li><a href="/matchlist/" id="gnMatch"><span>メニュー3</span></a></li>
            <li><a href="/teamintro/" id="gnTeam"><span>メニュー4</span></a></li>
            <li><a href="/media/" id="gnMedia"><span>メニュー5</span></a></li>
        </ul>

CSS

/*
span.hoverに
マウスオーバーした画像位置を指定しておく
*/

JavaScript

/* -------------------------------------------------------------------
 *     Smooth Hover Plugin（プラグイン化する）
 *     ------------------------------------------------------------------- */

$(document).ready(function(){
    if ($.browser.msie && $.browser.version < 7) return;
    
    $($shID)
    //.removeClass('highlight')
    .find('a')
    .append('<span class="hover" />').each(function () {
        var $span = $('> span.hover', this).css('opacity', 0);
        $(this).hover(function () {
            // on hover
            $span.stop().fadeTo(300, 1);
        },function () {
            // off hover
            $span.stop().fadeTo(300, 0);
        });
    });
});