申明，这篇说的还是利用jQuery的技术文，虽这标题写得一点也不专业没个术语。不过，个人觉得咱们又不是专业人士，折腾这些也不出于一份兴趣嘛，所以……不管标题还是内容，咱随意！ ^ ^

效果图上：

animate1.jpg animate2.jpg

就是鼠标移到导航各位标题上时会向下滑动，移开则回复原样。另外，给侧边栏Tab选项卡也加上了这个效果，不过是横向滑动了~

代码上：

一、HTML代码结构

<div id="menu"> 
	<ul class="nav"> 
		<li><a href="http://immmmm.com/">首页文章</a></li>
		<li><a href="http://immmmm.com/wordpress">折腾WP</a></li>
		<li><a href="http://immmmm.com/softgame">软件游戏</a></li>
	</ul>
</div>

这是我导航的HTML源代码，看下结构就行~CSS部分也就略了，请直接看：

二、jQuery控制代码

$("#menu .nav li").hover(function(){
		$(this).stop().animate({marginTop:"+=12"}, 250);}
	,function(){
		$(this).stop().animate({marginTop:"0"}, 150);
});

什么意思呢？就是鼠标移到 #menu .nav li 时，添加一个在这个 li 子项添加CSS属性{margin-top:12px}，过程时间为250ms的自定义动画；鼠标移开则{margin-top:0px}，过程时间为150ms。

提示：这里的jQuery代码很简单，要注意的就是需要选中添加自定义动画的对象（如 #menu .nav li ）；当然，animate这个属性的功能并非只此而已，它可是可以给对象的任何CSS属性变化添加一个时间过程的！

更多内容看API：《jQuery中文文档》