直接上源代码，具体的方法可以在源代码中看到：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>解决js滑动菜单,卡顿的现象</title>
    <meta name="generator" content="EverEdit" />
    <meta name="author"  content="" />
    <meta name="keywords" content="" />
    <meta name="description" content=""  />
    <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
    <style type="text/css">
        body{margin:0px;}
        .nav{position:relative;padding-left:50px;margin:0px;}
        .nav li{display:inline; list-style:none;}
        .nav li a{ text-decoration:none;}
        .slidebar{ position:absolute; width:45px; height:2px; top:16px;
            left:0px; background-color:#000;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#slide_1,#slide_2").css("left", $(".nav>li>a").offset().left);
            //导航菜单一监听hover效果
            $("#nav1 li a").mouseenter(function(){
                $("#slide_1").animate( {left : $(this).offset().left},200);
            });
            //加延迟处理的导航条2
            var tId = null;//时间ID，当前元素
            $("#nav2 li a").mouseenter(function(){
                var ele = $(this).offset().left;
                tId = setTimeout(function(){$("#slide_2").animate({left:ele});},300);
              }).mouseout(function() {              
                 clearTimeout(tId); //清除定时操作
            });
        });      
    </script>
</head>
<body>
    <h4>Demo1:当鼠标滑动快了之后，后面的动画会一直执行下去</h4>
    <ul id="nav1" class="nav">
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Menu2</a></li>
        <li><a href="#">Menu3</a></li>
        <span id="slide_1" class="slidebar"></span>
    </ul>
    <h4>Demo2:加了延迟处理，卡顿的现象不会出现了</h4>
    <ul id="nav2" class="nav">
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Menu2</a></li>
        <li><a href="#">Menu3</a></li>
        <span id="slide_2" class="slidebar"></span>
    </ul>
</body>
</html>