javascript - この方法でナビゲーション バーをアニメーション化するにはどうすればよいでしょうか。

Question

これが私のコードです。

したい：

• 強調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);
    }