凌晨四点的蓝

jquery给我们带来了太多的惊喜，有时候甚至让我们有些膨胀了，无休止地追求一些效果，不过随着电脑终端的不断升级，客户端的运行能力已经不再是什么问题，所以各种各样的Jquery特效真是如雨后春笋般涌现。

WORDPRESS博客一族中，侧边栏切换效果应该应用的很多，很多博客都用上了，不过万戈的博客加了滑动的效果，感觉更绚丽一点，经过大半天的研究，终于将该效果迁移到自己的博客上。

对于本文中提到js代码，css代码，html代码，在万戈的博文中已经做了介绍，我这里要做的是疏通js以及cs代码，做到知其然也知所以然，这样才能触类旁通，灵活应用，其实对于我来说，难点还是在于CSS，jquery代码无非是一个js库，没有什么难理解的，就是前端的布局我比较菜，研究起来有些耗时。

首先上php代码。

[php]

[/php]

到这里很容易看出基本思路，三个列表的hover事件控制着三个内容div层的交替显示，再加点jquery自带的显示效果就行了。

然后是jquery代码

[javascript]$(document).ready(function(){
$("li#switcherA").hover(function(){
//停止图片动画
$("#switcher img").stop(true,true);
//animate执行css属性集的自行以动画
//下面一句代码的意思就是将三角形图片移到父级元素left=54px处。
$("#switcher img").animate({left:"54px"},250);
//A内容层淡入
$("#tabContentA").fadeIn("slow");
//B内容层淡出
$("#tabContentB").fadeOut("fast");
//C内容层淡出
$("#tabContentC").fadeOut("fast")
});
$("li#switcherB").hover(function(){
$("#switcher img").stop(true,true);
$("#switcher img").animate({left:"150px"},250);
$("#tabContentA").fadeOut("fast");
$("#tabContentB").fadeIn("slow");
$("#tabContentC").fadeOut("fast")
});
$("li#switcherC").hover(function(){
$("#switcher img").stop(true,true);
$("#switcher img").animate({left:"246px"},250);
$("#tabContentA").fadeOut("fast");
$("#tabContentB").fadeOut("fast");
$("#tabContentC").fadeIn("slow")
});
});[/javascript]

无非就是用到了juery封装好的animate,stop,fadeIn,fadeOut四个函数来实现动画效果，代码加了注释，应该非常容易理解。

另外，在木木同学那里看到了精简版的js实现同样的效果，主要是用了jquery的index函数，个人觉得精简不代表有效率，index()进行搜索的过程当然是要耗时的，不过这种写法比较灵活。
[javascript]
$(document).ready(function(){
$("#switcher li").hover(function () {
var i=$('#switcher li').index(this),l=i*96+75;
$("#switcher span").stop(true,true).animate({left:l},250);
$("#tab").children().eq(i).fadeIn("slow").siblings().fadeOut("fast")
});
});[/javascript]

最后是关键的CSS布局代码

[css]/*滑动*/
#moreposts {
width: 308px;
height: 280px;
float: right;
border: 1px solid #C8C8C8;
position: relative;
color: #646464;
margin-bottom:5px;
background-color: #F6F6F6;
}
#tab{
height:240px;
padding-left:10px;
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
overflow:hidden;
}
#tab div{
height:260px;
overflow:hidden;
}
#tab ul li{
width:280px;
line-height:18px;
text-align:right;
font:12px SimSun;
margin-bottom:4px;
}
#tab ul li a{
width:200px;
height:18px;
float:left;
text-align:left;
overflow:hidden;
}
#tabContentB,#tabContentC{
/* 非首块内容区域默认不显示 */
display:none;
}
#switcher ul{
width:288px;
position:absolute;
border-top:1px solid #646464;
bottom:2px;
padding-top:11px;
margin:0 10px;
font-size:1.2em;
display: block;
}
#switcher ul li{
width:96px;
line-height:17px;
text-align:center;
float:left;
cursor:pointer;
}
#switcher img {
position: absolute;
bottom: 39px;
left: 54px;
}
.radius{
border-radius:5px;
}[/css]

css要注意的地方狠多了：

• 滑动区域的总宽度不能超过侧边栏宽度310，所以定义了moreposts的宽度为308，再加上边框1*2px，正好等于310px；
• 三个内容层的高度一定要占满他们父层tab的高度，否则在动画切换的过程中，会出现两个层错乱的情况，道理很简单，如果内容层小于其外层容器，那么被隐藏的第二个内容层在渐渐显示（而且是移动的）的时候就会被看到，加上第一个内容层还没有退去，就会显得凌乱。
• 最后就是下面的移动图片，自己好好计算一下相对位置就行了，img的bottom:39基本等于li的行高17+li的magin-bottom10+ul的bottom2+ul的padding-top: 11;