导航部分选中的背景跟随鼠标滑动

 为了让导航li的背景跟随鼠标比较平滑的移动，我进行了一系列尝试，最后发现，若背景加在li上让其跟随鼠标滑动，会出现卡顿效果，所以，将背景放在ul中，让其背景位置随着li的个数改变（ backgroundPosition:
navLi.width() * n），这样比较平滑
HTML结构如下：




[b]css代码如下：

 [/b]
#nav-div ul li a {

   text-decoration: none;

    height: 40px!important;

    line-height:40px;

    color:#333;

    font-size:16px;

}

 #nav-div {

    width:728px;

    height:45px;

    margin:auto;

    position:relative;

}

#nav-div ul {

    width:100%;

    height:45px;

    list-style:none;

    cursor:pointer;

    background:url(../images/border.gif)no-repeat;   //-----关键：背景图片

}

#nav-div ul li {

    float:left;

    width:104px;

    text-align:center;

    height:45px;

    line-height:45px;

    list-style:none;

}

 #liItemPaner {

    width:104px;

    height:45px;

    position:absolute;

}

.nav-side {

    width:728px;

    height:45px;

}

#nav .nav-on {

   border-bottom: 5px solid #f60 !important;

}

JS代码如下：

$(document).ready(function(e) {

    var navLi =$("#nav-div ul li"),

       navUl
=$("#nav-div ul"),

       speed
=200;

    functionOnClick() {

       n =navUl.find("li.on").index();

      navUl.stop().animate({

         backgroundPosition:
navLi.width() * n + 10      //--------点击后改变底线固定位置的关键

       },speed);

    }

   OnClick();

   navLi.hover(

       function(){

         
n =$(this).index();

         navUl.stop().animate({

            backgroundPosition:
navLi.width() * n +10   //--------改变位置的关键

         
},speed);

       },

       function(){

         OnClick();

       })

   navLi.click(function() {

      $(this).addClass("on").siblings().removeClass("on")

    });

   $(window).scroll(function() {

      if($(window).scrollTop()
> $("#nav").height() + 50) {

         $("#nav").addClass("scoll_nav")