jquery 菜单滚动动画

网上代码 有修改过

//jquery-1.5.1.min.js
(function($){
	$.fn.extend({
		bgslide:function(value){
			//可选参数
			value = {"startf":88}
			value=$.extend({
				"fw":12,//--动画左右
				"sw":2,//--动画左右
				"ftime":200,//--动画时间
				"stime":400,//--动画时间
				"menuindex":0,//--悬停的位置
				"fnobj":this//--悬停的位置
			},value);
			//初始化背景的位置
			var liw = $("ul li:eq("+value.menuindex+")",value.menu).width();//获取第一个li的宽
			var $slide = $(this).children("div");	
			var left = $("ul li:eq("+value.menuindex+")",value.menu).position().left;	//获取当前li的横坐标	
			value=$.extend(value,{"startf":left});//第一次悬停的位移
			$slide.css({"width":liw,"left":left});//悬停
			getClick($("ul li:eq("+value.menuindex+")",value.menu),this);
			//悬停时执行动画
			function hani(w,l){
				$slide.stop(true)//很关键的一句话，当悬停时，让正在执行的动画，和列队中的动画，都取消；防止鼠标不停滑动时的bug;
					  .animate({"width":w,"left":l+value.fw},value.ftime)
					  .animate({"left":l-value.fw},value.stime)
					  .animate({"left":l+value.sw},value.stime)
					  .animate({"left":l-value.sw},value.stime);
			}
			//离开时执行动画	
			function oani(){
				$slide.stop(true)
					  .animate({"width":liw,"left":value.startf},value.ftime)
					  .animate({"left":value.startf-value.fw},value.stime)
					  .animate({"left":value.startf+value.sw},value.stime)
					  .animate({"left":value.startf-value.sw},value.stime);
			}
			$("ul li",this).hover(function(){
				getHover(this);
				var w = $(this).width();			//获取当前li的宽
				var l = $(this).position().left;	//获取当前li的横坐标	
				if($(this).index()!=value.menuindex){//鼠标悬停在选中的li时，不发生动画
					hani(w,l);
		  		}
			},function(){
				DelHover(this);
				oani();
			});
			$("ul li",this).click(function(){
				getClick(this,value.fnobj);
				var w = $(this).width();			//获取当前li的宽
				var l = $(this).position().left;	//获取当前li的横坐标
				var index =$(this).index();
				value=$.extend(value,{"startf":l,"menuindex":index});
				$slide.css({"width":w,"left":l});
			});
		}	
	})
})(jQuery);

function getHover(obj)
{
	$(obj).find("span").addClass("icohoverorange");
}
function getClick(obj,fnobj)
{
	$(fnobj).find("span").removeClass("select");
	$(obj).find("span").addClass("select");
}
function DelHover(obj)
{
	$(obj).find("span").removeClass("icohoverorange");
}

<div class="nav-box">
      <ul>
        <li><span class="home"></span><a href="#" >首页</a></li>
        <li><span class="contact"></span><a href="#">客户管理</a></li>
        <li><span class="folder"></span><a href="#">销售管理</a></li>
        <li><span class="calendar"></span><a href="#">市场管理</a></li>
        <li><span class="setting"></span><a href="#">维护管理</a></li>
        <li><span class="briefcase"></span><a href="#">立案管理</a></li>
        <li><span class="notepad"></span><a href="#">财务管理</a></li>
        <li class="last"><span class="display"></span><a href="#" >系统设置</a></li>
      </ul>
      <div class="nav-line" ></div>
    </div>
</div>

.nav-box { float:right; position:relative;}
/*.nav-box ul { padding-top:8px;}*/
.nav-box ul li { float:left; font-family:微软雅黑; font-size:14px; padding:0 2px; height:50px;text-align: center;max-width: 70px;display: block;/* line-height:50px; */}
.nav-box ul li a { color:#4b4b4b; min-width:32px; display:inline-block;margin: 0px 5px;
font-family: 微软雅黑;
font-size: 14px;
.nav-box ul li - 14px
body - 12px
font-style: normal;
font-variant: normal;
font-weight: normal;
}
.nav-box ul li a:hover { text-decoration:none;}
.nav-box ul li.last { font-family:微软雅黑; font-size:12px; padding-top:1px;}
.nav-box ul li.last a { color:#a2a2a1;}
.nav-box .nav-line { position:absolute; left:0; bottom:0; height:2px; line-height:2px; font-size:0; width:52px; background:#35c4fd;}