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

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);
    }