jquery导航条鼠标悬停图标图片文字上下翻滚特效

使用方法：

引入核心CSS样式

#feature li,#feature li a,#feature li a span,#feature li a p{display:block;height:55px;overflow:hidden;position:relative;cursor:pointer;}
#feature{width:150px;height:330px;overflow:hidden;margin:20px auto;}
#feature li{width:150px;}
#feature li a{background:url("images/feature2.png") no-repeat;text-decoration:none;}
#feature li a span{font-size:14px;font-weight:bold;padding-left: 68px;color:#666;line-height:55px;}
#feature li a:hover span{color:#39e;}
#feature li a p{color:#444;padding: 9px 14px 0 68px;line-height:1.5em;height:46px;}
#feature li#f1 a{background-position:0 0;}
#feature li#f1 a:hover{background-position:-150px 0;}
#feature li#f2 a{background-position:0 -55px;}
#feature li#f2 a:hover{background-position:-150px -55px;}
#feature li#f3 a{background-position:0 -110px;}
#feature li#f3 a:hover{background-position:-150px -110px;}
#feature li#f4 a{background-position:0 -165px;}
#feature li#f4 a:hover{background-position:-150px -165px;}
#feature li#f5 a{background-position:0 -220px;}
#feature li#f5 a:hover{background-position:-150px -220px;}
#feature li#f6 a{background-position:0 -275px;}
#feature li#f6 a:hover{background-position:-150px -275px;}

引入jQuery库文件

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

引入一段JS

$(document).ready(function(){
	var timerId = null;
	function itemShow(){
		if (timerId) return;
		timerId = setInterval(function(){
			$("#feature li.current a span").animate({top: "-55px" }, "fast");
			$("#feature li.current a p").animate({top: "-55px" }, "fast");
		}, 200);
	}
	function itemHide(){
		if (!timerId) return;
		$("#feature li.current a span").animate({top: "0px" }, "fast");
		$("#feature li.current a p").animate({top: "0px" }, "fast");
		$("#feature li.current").removeClass("current");
		clearInterval(timerId);
		timerId = null;
	}
	$("#feature li").hover(function(){
		$(this).addClass("current");
		itemShow();
	}, itemHide);
});

HTML结构

<ul id="feature">
	<li id="f1"><a href="#" target="_blank"><span>开始减肥</span><p>H君带你开始减肥之旅</p></a></li>
	<li id="f2"><a href="#" target="_blank"><span>减肥问答</span><p>解答减肥中的种种疑问</p></a></li>
	<li id="f3"><a href="#" target="_blank"><span>减肥评估</span><p>专家评估你的减肥方法</p></a></li>
	<li id="f4"><a href="#" target="_blank"><span>热量计算</span><p>方便的热量计算器</p></a></li>
	<li id="f5"><a href="#" target="_blank"><span>减肥工具</span><p>简单有效的减肥好帮手</p></a></li>
	<li id="f6"><a href="#" target="_blank"><span>减重服务</span><p>专业减重顾问帮你减肥</p></a></li>
</ul>