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

使用方法：

引入核心CSS样式

/* navbox */
.navbox{height:32px;overflow:hidden;}
.navbox li{float:left;width:100px;text-align:center;}
.navbox li a{display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;font-size:14px;font-weight:800;}
.navbox li a{background:url(images/bg2.jpg) repeat 0 0;}
.navbox li a:hover,.navbox li a:focus,.navbox li a:active{background-position:-150px 0;}
#a a{background:url(images/bg.jpg) repeat -20px 35px;}
#b a{background:url(images/bg2.jpg) repeat 0 0;}
#c a{background:url(images/bg3.jpg) repeat 0 0;}
#d a{background:url(images/bg4.jpg) repeat 0 0;}
/* navTag */
.navTag{width:680px;margin:20px auto;background:url(images/bmid_111.gif) repeat-x;height:62px;}
.navTag li{float:left;}
.navTag a{background:url(images/bright_111.gif) no-repeat right top;text-decoration:none;display:block;float:left;}
.navTag a span{display:block;background:url(images/bleft_111.gif) no-repeat left top;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#FFF;font-weight:700;line-height:62px;padding:0 25px;}
.navTag a:hover{background-position:right bottom;}
.navTag a:hover span{background-position:left bottom;color:#FFF;font-weight:700;font-style:normal;text-decoration:none;}

引入jQuery库文件、插件JS文件

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

插件初始化、参数配置（演示中的几种配置）

$(function(){
	
	//实例2: 自顶向下
	$("#a a").css({backgroundPosition: "-20px 35px"}).mouseover(function(){
		$(this).stop().animate({
			backgroundPosition:"(-20px 94px)"
		},{duration:500})
	}).mouseout(function(){
		$(this).stop().animate({
			backgroundPosition:"(40px 35px)"
		},{duration:200, complete:function(){
			$(this).css({backgroundPosition: "-20px 35px"})
		}})
	})
	
	//实例3: 右左
	$('#b a').css({backgroundPosition:"0 0"}).mouseover(function(){
		$(this).stop().animate({
			backgroundPosition:"(-150px 0)"
		},{duration:500})
	}).mouseout(function(){
		$(this).stop().animate({
			backgroundPosition:"(-300px 0)"
		},{duration:200,complete:function(){
			$(this).css({backgroundPosition: "0 0"})
		}})
	})
	
	//实例4: 淡出淡入
	$('#c a').css({backgroundPosition:"0 0"}).mouseover(function(){
		$(this).stop().animate({
			backgroundPosition:"(0 -250px)"
		},{duration:500})
	}).mouseout(function(){
		$(this).stop().animate({
			backgroundPosition:"(0 0)"
		},{duration:500})
	})
	
	//实例5: 淡出淡入颜色	
	$('#d a').css({backgroundPosition: "0 0"}).mouseover(function(){
		$(this).stop().animate({
			backgroundPosition:"(0 -250px)"
		},{duration:500})
	}).mouseout(function(){
		$(this).stop().animate({
			backgroundPosition:"(0 0)"
		},{duration:500})
	})
	
	//实例6: 背景折叠动画效果
	$(".navTag a").css({backgroundPosition: "right 0"}).mouseover(function(){
		$(this).stop().animate({
			backgroundPosition:"(right -62px)"
		},{duration:400})
	}).mouseout(function(){
		$(this).stop().animate({
			backgroundPosition:"(right 0)"
		},{duration:400})
	})
	$(".navTag a span").css({backgroundPosition:"left 0"}).mouseover(function(){
		$(this).stop().animate({
			backgroundPosition:"(0 -62px)"
		},{duration:400})
	}).mouseout(function(){
		$(this).stop().animate({
			backgroundPosition:"(left 0)"
		},{duration:400})
	})
	
});

HTML结构（演示中的几种结构）

<h2>实例1: 无脚本</h2>
    <ul class="navbox" id="noscript">
        <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>
    
    <h2>实例2: 自顶向下</h2>
    <ul class="navbox" id="a">
        <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>
    
    <h2>实例3: 右左</h2>
    <ul class="navbox" id="b">
        <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>
    
    <h2>实例4: 淡出淡入</h2>
    <ul class="navbox" id="c">
        <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>
    
    <h2>实例5: 淡出淡入颜色</h2>
    <ul class="navbox" id="d">
        <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>
    
    <h2>实例6: 背景折叠动画效果</h2>
</div>
<div class="navTag">
    <ul>
        <li><a href="#"><span>Home</span></a></li>
        <li><a href="#"><span>About</span></a></li>
        <li><a href="#"><span>Contact</span></a></li>
    </ul>
</div>