导航栏移入移出滑块跟随特效(简单简约)

闲了做了一个导航栏移入移出滑块跟随动画的demo以及遇到的问题(代码量少)

css部分

<style>
        * {
            padding: 0;
            margin: 0;
        }

        #a1 {
            position: relative;
        }

        ul {
            display: flex;
        }

        li {
            width: 200px;
            height: 50px;
            border: 1px solid burlywood;
            list-style: none;
            background-color: rgba(0, 0, 0, 0);
            z-index: 999999;
        }

        #a2 {
            width: 202px;
            height: 50px;
            left: 0px;
            position: absolute;
            transition: all .3s linear;
            top: 0px;
        }

    </style>

HTML部分

<div id="a1">
        <ul>
            <li class="selectedNav"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div id="a2" style="background-color: #000000;"></div>
    </div>

JS部分

<script src="./jquery.js"></script>
<script>
    $('ul').on('mouseenter', 'li', function (e) {
        $('#a2').css("left", e.currentTarget.offsetLeft + "px");
    })
    $('ul').on('mouseleave', 'li', function (e) {
        $("#a2").css("left", $('.selectedNav')[0].offsetLeft + "px");
    })
    $("#a1").on("click",'li', function (e) {
        $("li").removeClass("selectedNav");
        $(this).addClass("selectedNav");
        $("#a2").css("left", e.currentTarget.offsetLeft + "px");
    })
</script>

主要功能:

• 移入滑块跟随效果,3s,匀速,改变了移入的位置,立刻更新动画效果
• 移出滑块回到上一次点击的位置,第一次默认第一格,更改修改类名selectedNav的位置即可
• 点击任意一个格子,移出或动画完成后,滑块会固定到最新点击格子的位置
• 适合动态添加和单页面网页

注意事项:由于css盒子层级问题,如果直接让滑块把格子盖住,格子的移入移出事件会受到影响,所以需要让格子的层级高于滑块,可以用背景颜色透明及半透明的方式来突出滑块

代码效果预览效果https://mrszqj.github.io/nav-ZQJ/