jQuery实现的平滑动画导航特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery实现的平滑动画导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>基于jQuery技术制作的平滑的动画导航</title>
	<link rel="stylesheet" href="animated-menu.css"/>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
	<script src="animated-menu.js" type="text/javascript"></script>
</head>

<body>
	<p>Rollover a menu item to expand it.</p>
	<ul>
		<li class="green">
			<p><a href="#">Home</a></p>
			<p class="subtext">The front page</p>
		</li>
		<li class="yellow">
			<p><a href="#">About</a></p>
			<p class="subtext">More info</p>
		</li>
		<li class="red">
			<p><a href="#">Contact</a></p>
			<p class="subtext">Get in touch</p>
		</li>
		<li class="blue">
			<p><a href="#">Submit</a></p>
			<p class="subtext">Send us your stuff!</p>
		</li>
		<li class="purple">
			<p><a href="#">Terms</a></p>
			<p class="subtext">Legal things</p>
		</li>
	</ul>
</body>
</html>

JS代码(animated-menu.js):

$(document).ready(function(){
	//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup///Remove outline from links$("a").click(function(){
	$(this).blur();
}
);
	//When mouse rolls over$("li").mouseover(function(){
	$(this).stop().animate({
	height:'150px'}
,{
	queue:false,duration:600,easing:'easeOutBounce'}
)}
);
	//When mouse is removed$("li").mouseout(function(){
	$(this).stop().animate({
	height:'50px'}
,{
	queue:false,duration:600,easing:'easeOutBounce'}
)}
);
}
);

CSS代码(animated-menu.css):

body{font-family:"Lucida Grande",arial,sans-serif;background:#F3F3F3;}
ul{margin:0;padding:0;}
li{width:100px;height:50px;float:left;color:#191919;text-align:center;overflow:hidden;}
a{color:#FFF;text-decoration:none;}
p{padding:0px 5px;}
.subtext{padding-top:15px;}
/*Menu Color Classes*/
.green{background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat;}
.yellow{background:#FBC700 url('images/yellow-item-bg.jpg') top left no-repeat;}
.red{background:#D52100 url('images/red-item-bg.jpg') top left no-repeat;}
.purple{background:#5122B4 url('images/purple-item-bg.jpg') top left no-repeat;}
.blue{background:#0292C0 url('images/blue-item-bg.jpg') top left no-repeat;}

附件:下载该文件资源,减少时间成本(增值服务)