常用的导航栏下划线滚动特效

很多页面的导航栏经常会用到一些特效，今天直接也谢了一个常用的，就是鼠标移到那个栏目，

下方的横线就会跟着划过去的一个过度效果，用了jq与css3的过度效果实现，接下来贴代码：

<section>
    <nav class="tab-bar clearfix" id="nav-bar">
        <a href="#">公司简介</a><a href="#">企业理念</a><a href="#">荣誉资质</a>
    </nav>
    <div class="slide-middle">
        <div id="slide-border"></div>
    </div>
</section>

---------------------------------------------------------------------------CSS-----------------------------------------------------------------------------------------------------------

/*选项卡下方滑块*/
.slide-middle {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

}

#slide-border {
    width: 124px;
    margin-top: -1px;
    border-bottom: 1px solid #207dc7;
    position: relative;
    z-index: 15;
    transition: 0.5s all;
}

----------------------------------------JS----------------------------------------------------------------------------------------------------------

<script>
    $(function () {
        //导航栏下放border滚动特效
        $('#nav-bar a').each(function (t) {
            $(this).mouseover(function () {
              console.log($(this).position('.tab-bar').left);
              var indexLeft = $(this).position('.tab-bar').left;
              $('#slide-border').css({"left":indexLeft}, 500)
            }).mouseout(function () {
                $('#slide-border').css({"left":0}, 500)
            });
        })
    })
</script>

来源：CSDN

作者：你帅还不是一样要敲代码

链接：https://blog.csdn.net/qq_32486147/article/details/77507927