js写常用导航鼠标下经过下方横线自动跟随

html代码如下：

<div class="header">
    <ul class="nav fr">
        <li class="nav-item nav-line">
            <a href="/" class="nav-link">首页</a>
        </li>
        <li class="nav-item nav-line">
            <a href="/" class="nav-link">公司介绍</a>
        </li>
        <li class="nav-item nav-line">
            <a href="/" class="nav-link">产品及解决方案</a>
        </li>
        <li class="nav-item nav-line">
            <a href="/" class="nav-link">客户案例</a>
        </li>
        <li class="nav-item nav-line">
            <a href="/" class="nav-link">联系我们</a>
        </li>
    </ul>
    <div class="wrap-line" style="opacity:0"></div>
</div>

css代码如下：

.header{position: absolute; height: 60px; top: 0; left: 0;  right: 0; color: #fff;background: rgba(0,0,0,.3); }
.header ul{ padding: 0; margin: 0;}
.header .nav-item{ padding: 0 20px; display: inline-block;}
.header .nav-item a{ text-decoration: none;}
.header .nav-item .nav-link, .header .nav-item:hover .nav-link {color: #fff;}
.header .nav-item .nav-link{ padding: 0; font-size: 15px; height: 60px; line-height: 60px;}
.wrap-line{ display: block; position: absolute; height: 3px; bottom: 5px;  background: #fff;}

js代码如下：

<script src="jquery.min.js"></script>
<script>
// 导航滑动效果
    $(function () {
        $('.nav .nav-line').hover(function() {
            $('.wrap-line').stop().animate({
                left: $(this).position().left + 25,
                width: $(this).outerWidth() - 50,
                opacity: 1
            });
        }, function() {
            $('.wrap-line').stop().animate({
                opacity: 0
            });
        });
    })	
</script>