制作滑动条菜单，如何延时处理滑动效果，避免动画卡顿

   1:  <ul id="nav"> 

   2:  　<li><a href="#">menu1</a></li>

   3:  　<li><a href="#">menu2</a></li>

   4:  　<li><a href="#">menu3</a></li>

   5:  　<li><a href="#">menu4</a></li>

   6:  　<span id="slide_1" class="slidebar"></span>

   7:  </ul>

   1:   

   2:   //导航菜单一监听hover效果

   3:  $("#nav li a").mouseenter(function() {

   4:        $("#slide_1").animate( {

   5:              left : $(this).offset().left

   6:        },200);

   7:  });

   1:  //加延迟处理的导航条2

   2:  var tId = null,ele;//时间ID，当前元素

   3:  $("#nav1 li a").mouseenter(function() {

   4:      ele = $(this);

   5:     //设置定时操作，并记录时间ID，用于清除定时器

   6:      tId = setTimeout(function() {

   7:         $("#slide_2").animate({left:$(ele).offset().left});

   8:      }, 100);

   9:  }).mouseout(function() {

  10:         //当鼠标移出目标元素时，清除定时操作

  11:          clearTimeout(tId);

  12:  });

Demo浏览地址：

http://xiaoweijs.duapp.com/demo/slidebar.html

总结