javascript - 我们如何以这种方式为导航栏设置动画？

Question

这里是 my code .

我想:

• 让 nav ul li 突出显示，滑到最左边，还有一个动画阴影来表示提升。
• 当鼠标指针离开导航栏时，将上述更改撤消。

我这里的代码附有:

• jquery.min.js
• jquery.color-2.1.2.min.js
• jquery.animate-shadow-min.js

虽然我没有发现任何错误，但这段代码不起作用。

$(document).ready(function () {
    var linearOffset = $("nav li:hover").offset().left;
    $("nav li").mouseenter(function () {
        $("nav li:hover").removeClass("disappear");
        $("nav li:hover").addClass("appear");
        $(".disappear").css("visibility", "hidden");
        $(".appear").animate({
            right: linearOffset,
            backgroundColor: 'rgba(5, 0, 234, 0.95)',
            color: 'rgb(255, 255, 255)'
        });
        $(".appear").stop(true, true);
        $(".appear").css("position", "absolute");
        var backupOffset = linearOffset;
        delete linearOffset;
    });
    $("nav").mouseleave(function () {
        $(".appear").stop();
        $(".appear").animate({
            left: linearOffset,
        });
        $(".disappear").css("visiblity", "visible");
        $(".appear").addClass("disappear");
        $(".appear").removeClass("appear");
    });
});

我的工作平台是 Windows 8 上的 Google Chrome 30.0.1599.101(官方版本 227552)。

Answer 1

CSS 和 HTML 太长所以我只链接 jsFiddle .

这是 JQuery:

$(".disappear").on('mouseenter', mEnter)
$('nav>ul').on('mouseleave', function () {
        $('.disappear').stop();
        $('.active').removeClass("active")
            .addClass("disappear");
        $(".disappear").show(700);
    });


function mEnter() {
        $(this).addClass("active");
        $(this).removeClass("disappear");
        $(".disappear").hide(700);
    }