jQuery 实现的背景渐显渐隐效果

发布于：电脑网络 3,787 次践踏

切入正题前，我先唠叨几句，放假对我来说真不是一件好事，感觉比上班还要忙，虽然有了更多可支配时间，但是有着和可支配时间完全不成正比的待办事宜。打开QQ的消息盒子，至少有20+条消息我还没有来的及查看，和各位说声抱歉了。好在还有 WordPress 作为我的精神支柱，每天调戏一下 WordPress，已经成了我的习惯。今天趁坐在电脑前的一会儿功夫，把小黑托付我的主题继续做下去，前两头说研究头部的背景自动更换功能，今天再把导航的另一个效果也折腾了，那就是 jQuery 实现的背景图片的渐隐渐显效果。

这个是仿腾讯 CDC 的导航效果，大家可以先看看 CDC 的，腾讯一直在山寨，今天轮到腾讯被山寨，我就是“寨主”！可以看到腾讯 CDC 的导航按钮的渐隐渐显效果是用 Flash 做的，但是我觉得用 Flash 做一个导航对小博客而言有点太奢侈了，而且对收录也不太好（腾讯当然是不愁收录的问题～）所以我想着法儿的用 jQuery 来实现它。我做了一个 DEMO（点此查看），不过很可惜，这个效果只在 Firefox、Chrome、Opera 等高级浏览器下有效果，在 IE 这等低智商浏览器下很杯具。所以就用了普通效果来处理。欲看此 DEMO，还请更换高级浏览器。

方法如下：

1、载入 jQuery

我没有时间测试这个需要什么版本的 jQuery 了，反正我用的是 jQuery 1.3X。

2、Html 部分

<div id="header">
    <ul id="nav">
        <li class="current_page_item"><a id="altbg1"href="#">页面一</a></li>
        <li><a id="altbg2" href="#">页面二</a></li>
        <li><a id="altbg3" href="#">页面三</a></li>
        <li><a id="altbg4" href="#">页面四</a></li>
        <li><a id="altbg5" href="#">页面五</a></li>
    </ul>
</div>

3、执行脚本

jQuery(document).ready(function($) {
    var num = 1;
    while (num <= 5) {
        var abc = num.toString();
        jQuery('#altbg' + abc).append('<span id="hover' + abc + '"></span>');
        jQuery('#hover' + abc).css('opacity', 0);
        num++;
    }
    jQuery('#hover1').parent().hover(function() {
        jQuery('#hover1').stop().animate({ opacity: '1' }, 300)
    },
    function() {
        jQuery('#hover1').stop().animate({ opacity: '0' }, 300)
    });
    jQuery('#hover2').parent().hover(function() {
        jQuery('#hover2').stop().animate({ opacity: '1' }, 300)
    },
    function() {
        jQuery('#hover2').stop().animate({ opacity: '0' }, 300)
    });
    jQuery('#hover3').parent().hover(function() {
        jQuery('#hover3').stop().animate({ opacity: '1' }, 300)
    },
    function() {
        jQuery('#hover3').stop().animate({ opacity: '0' }, 300)
    });
    jQuery('#hover4').parent().hover(function() {
        jQuery('#hover4').stop().animate({ opacity: '1' }, 300)
    },
    function() {
        jQuery('#hover4').stop().animate({ opacity: '0' }, 300)
    });
    jQuery('#hover5').parent().hover(function() {
        jQuery('#hover5').stop().animate({ opacity: '1' }, 300)
    },
    function() {
        jQuery('#hover5').stop().animate({ opacity: '0' }, 300)
    });
});

因为五个按钮的脚本部分有重复的地方，我就用了 while 循环，不过我觉得应该还可以精简，实在不会了，请教一下在座的高人，帮帮我吧。

4、样式部分

#header ul span{background:url('images/nav.png') no-repeat 0 -22px;}

因为时间有限，本文写的比较粗糙，仅作学习笔记，请阅后即焚。

  7. jQuery 真的不熟啊…那個代碼有點長，看了暈昏昏，好像看到評論裡有人提供比較短的代碼，是選擇器的關係嗎？呼呼～我應該去好好看我那本《鋒利的jQuery》，最近太熱、身體變弱、腦袋太不清楚也太不用功了 :arrow:

    不過我每次都能在萬戈這裡看到新玩意兒啊～真不愧是折騰大帝！

  9. jQuery(#nav li).hover(
    function(){
    jQuery(this).animate({opacity:'0'}, 300);
    },
    function() {
    jQuery(this).animate({opacity:'0'}, 300);
    }
    );
    额，这样应该就可以了，不用那么长的 ~