kojilow Blog | ナビゲーションをフェードで切り替え

画像でのナビゲーションをフェードで切り替えるのに以前はプラグインとか使っていたけど、最近は自分で作るので備忘録としてメモ。

まずナビゲーション部分のHTML。

<!– navi –>
<ul id="navi">
    <li class="navi01"><a href="#"><img src="/sample/fadenavi/imgs/navi-01.gif" width="120" height="30" alt="Navigation1" /></a></li>
    <li class="navi02"><a href="#"><img src="/sample/fadenavi/imgs/navi-02.gif" width="120" height="30" alt="Navigation2" /></a></li>
    <li class="navi03"><a href="#"><img src="/sample/fadenavi/imgs/navi-03.gif" width="120" height="30" alt="Navigation3" /></a></li>
    <li class="navi04"><a href="#"><img src="/sample/fadenavi/imgs/navi-04.gif" width="120" height="30" alt="Navigation4" /></a></li>
</ul>
<!– /navi –>

次にCSS。それぞれのliタグの背景をロールローバー時の画像にする。

#navi {
    width: 480px;
    height: 30px;
}
#navi li {
    overflow: hidden;
    float: left;
    width: 120px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: left top;
}
.navi01 {
    background-image: url(/sample/fadenavi/imgs/navi-01_ov.gif);
}
.navi02 {
    background-image: url(/sample/fadenavi/imgs/navi-02_ov.gif);
}
.navi03 {
    background-image: url(/sample/fadenavi/imgs/navi-03_ov.gif);
}
.navi04 {
    background-image: url(/sample/fadenavi/imgs/navi-04_ov.gif);
}

最後にjavascript。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(‘#navi a img’).hover(
        function() {
            $(this).stop().animate({"opacity":0});
        },
        function() {
            $(this).stop().animate({"opacity":1});
        }
    );
});
</script>

サンプル