淡入淡出隐藏侧边栏JQ代码

很多朋友肯定已经发现了我导航栏旁边有一个隐藏侧边栏的字，不妨点击一下就能看到效果了——边栏先是慢慢消失，内容部分开始靠过来！三秒钟后就完成了，相反显示侧边栏其实就是一个逆过程，先是内容部分缩回去，再试侧边栏慢慢显示。实现这个效果的代码也不难，参考了林木木的《JQuery 学习笔记之：关闭/显示 WordPress侧边栏！》具体实现方法如下：

在你要放置隐藏开关的地方加入

<div id="closeside">
<a class="close-sidebar" style="cursor:pointer;color:#ddd;" title="侧边栏很碍眼？">关闭侧边栏</a>
<a class="show-sidebar"  title="想看看侧边栏？" style="color:#ddd;display:none;cursor:pointer">显示侧边栏</a> 
</div>

在主题js文件中加入如下

jQuery(document).ready(function($) {
    $('.close-sidebar').click(function() {
                $('.close-sidebar').hide();
        $('.close-sidebar,#sidebar').fadeOut(1000);//在一秒钟内隐藏侧边栏
        $('.show-sidebar').show();
                window.setTimeout(function(){//等侧边栏隐藏完毕 延迟1秒钟后开始将内容部分展开
                 $('#content').animate({
            width: "920px"//内容部分大小 根据你的主题
        },
        1000);
                },1000);

            });
    $('.show-sidebar').click(function() {
        $('.show-sidebar').hide();
                $('.close-sidebar').show();
        $('#content').animate({
            width: "635px"//内容部分原大小
        },
        1000);
                window.setTimeout(function(){//等待内容部分完全收缩后渐显侧边栏
                 $('#sidebar').fadeIn(1000);
                },1000);
     });

});

添加代码时需要注意你的侧边栏部分的ID 和内容部分的ID

当然还要引入jquery库 呵呵 代码高亮插件不好用，不知道这样子大家看的习惯不？

这几天一直很忙，所以都没有时间来维护一下的博客哦！当然还是多些大家对我的支持！周六要考ＪＡＶＡ了，发现自己还没怎么准备好！ 呵呵，希望能够通过吧，下个月底要进行系分考试了，这个看书看了一些，感觉选择题部分还是没什么问题了，就是下午的题目还是没有一个头绪～唉·今天腾讯要我去浙大参加实习生宣讲会，无奈我在丽水，离杭州还是有些距离，一时赶不过去了……看来我又失去了一次机会……希望以后能再有机会吧！呵呵，这两天还一直感冒，老打喷嚏……太郁闷了，希望朋友们要注意身体哦！～下午还买了一个无线鼠标20多元呵呵！~，雷伯的，侧边栏上有图片链接哦！个人表示蛮喜欢的，卖家已经发货，希望两天内能够收到吧！哈哈