jQuery鼠标滑过仿flash动画导航条特效

使用方法：

引入核心CSS样式

/* menu */
.menu{height:45px;overflow:hidden;}
.menu ul li{float:left;position:relative;text-align:center;line-height:45px;height:45px;overflow:hidden;}
.menu ul li a{position:relative;/* 必要元素 */display:block;width:110px;height:45px;font-size:12px;font-weight:bold;text-decoration:none;cursor:pointer;}
.menu ul li a span{position:absolute;/* 必要元素 */left:0;width:110px;}
.menu ul li a span.out{top:0px;}
.menu ul li a span.over,.menu ul li a span.bg{top:-45px;}
/* 实例一 */
#menu{background:#F8F0D5;}
#menu ul li a{color:#000;}
#menu ul li a span.over{color:#FFF;}
#menu ul li span.bg{height:45px;background:url('images/04.png') center center no-repeat;}
/* 实例二 */
#menu2{background:#89A4B1;}
#menu2 ul li a{color:#FFF;}
#menu2 ul li a span.over{background:#A9CC2D;color:#FFF;}

引入jQuery库文件

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

JS结构

$(document).ready(function(){
	
	//实例一
	$("#menu li a").wrapInner('<span class="out"></span>' ).append('<span class="bg"></span>');
	$("#menu li a").each(function(){
		$('<span class="over">' +  $(this).text() + '</span>').appendTo(this);
	});
	$("#menu li a").hover(function(){
		$(".out",this).stop().animate({'top':'45px'},250);
		$(".over",this).stop().animate({'top':'0px'},250);
		$(".bg",this).stop().animate({'top':'0px'},120);
	},function(){
		$(".out",this).stop().animate({'top':'0px'},250);
		$(".over",this).stop().animate({'top':'-45px'},250);
		$(".bg",this).stop().animate({'top':'-45px'},120);
	});
	//实例一
	$("#menu2 li a").wrapInner('<span class="out"></span>');
	$("#menu2 li a").each(function(){
		$('<span class="over">' + $(this).text() + '</span>').appendTo(this);
	});
	$("#menu2 li a").hover(function(){
		$(".out",this).stop().animate({'top':'45px'},200);
		$(".over",this).stop().animate({'top':	'0px'},200);
	},function(){
		$(".out",this).stop().animate({'top':'0px'},200);
		$(".over",this).stop().animate({'top':'-45px'},200);
	});
});

HTML结构

<h2>实例1、</h2>
<div id="menu" class="menu">
    <ul>
        <li><a href="#">网站首页</a></li>
        <li><a href="#">项目案例</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">技术支持</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</div>
<h2>实例2、</h2>
<div id="menu2" class="menu">
    <ul>
        <li><a href="#">网站首页</a></li>
        <li><a href="#">项目案例</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">技术支持</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</div>