导航下标跟随动画效果

<div class="hnav">
            <ul><li><a href="http://www.fanxueer.com/" title="首页" >首页</a></li><li><a href="http://www.fanxueer.com/ydf.html" title="运动服" >运动服</a></li><li><a href="http://www.fanxueer.com/mtny.html" title="美体内衣" >美体内衣</a></li><li><a href="http://www.fanxueer.com/ygf.html" title="瑜伽服" >瑜伽服</a></li><li><a href="http://www.fanxueer.com/product/" title="产品中心" >产品中心</a></li><li><a href="http://www.fanxueer.com/OEMdz.html" title="OEM定制" >OEM定制</a></li><li><a href="http://www.fanxueer.com/sjtd.html" title="设计团队" >设计团队</a></li><li class="none"><a href="http://www.fanxueer.com/eyzxzx.html" title="新闻案例" >新闻案例</a></li><li><a href="http://www.fanxueer.com/gyfxe.html" title="关于梵雪儿" >关于梵雪儿</a></li></ul>
            <span class="line"></span>
        </div>

.hnav{float:right;position:relative;}
.hnav ul{height:65px;}
.hnav li{width:80px;float:left;position:relative;margin-left:25px;z-index:1;}
.hnav a{display:block;height:65px;line-height:65px;text-align:center;font-size:14px;color:#fff;}
.hnav .line{display:none;position:absolute;width:80px;height:3px;background-color:#fb5b21;left:0;bottom:0;}
.hnav li:hover  a,.h-nav li.cur a,.hnav li.cur  a{color:#fb5b21;}

$(function () {
    //导航效果
    function nav() {
        var $line = $('.hnav .line');
        if ($(".hnav li").hasClass('cur')) {
            var x = $(".hnav li.cur").position().left + 25;
            $line.show().css("left", x);
        }
        $('.hnav li').hover(function () {
            var x = $(this).position().left + 25;
            $line.show().stop(true, false).animate({ "left": x }, 400);
        }, function () {
            if ($('.hnav li').hasClass('cur')) {
                $line.stop(true, false).animate({ "left": x }, 400);
            } else {
                $line.hide();
            }
        })
    }
    nav();
});

导航下划跟随鼠标、或跟随到当前指定位置，Js获取当前坐标位置，再结合jq animate动画实现，兼容较底版本浏览器，也可以用css3过度动画实现