jQuery坏掉的动画- Div有时不会消失

Question

最近几天，我一直试图用jQuery动画制作一个侧边栏，但可能出了点问题，它似乎坏了，不能完全工作，因为#导航( div )有时甚至不会消失，这可能取决于我把鼠标从div中取出的位置，因为它只会在某些地方消失。我在代码中发现的另一件事/问题是，当您多次点击左角时，#导航就会不断出现，并一次又一次地消失，就像我碰到的拐角处一样。我怎样才能解决这些小问题，但却引发了一些问题？

以下是我今天编写的代码：

<div id="navigation">
    <div id="hidden">
        <h3>Navigation</h3>
        <hr></hr>
        <a href="#">Blog</a>
        <a href="#">Live</a>
        <a href="#">Events</a>
        <a href="#">Genres</a>
        <a href="#">The team</a>
        <a href="#">Changelog</a>

        <div class="userpanel">
            <a href="#">Sign in</a>
            <a href="#">Sign up</a>
        </div>
    </div>
</div>

<script type="text/javascript">
$("#navigation").mouseover(function(){
    $(this).animate({
        width: '300px',
        opacity: '1',
    }, 400);
    $("#hidden").css({
        display: 'block',
    });
});

$("#navigation").mouseleave(function(){
    $(this).animate({
        width: '5px',
        opacity: '0.0',
    }, 400);
    $("#hidden").css({
        display: 'none',
    });
});
</script>

而且呃..。下面是CSS：

#navigation {width: 5px; height: calc(100vh - 50px); background: #171C21; opacity: 0.0; padding-top: 10px; padding-bottom: 10px;}
#navigation #hidden {width: 90%; margin: auto; height: 100%; display: none; text-align: center;}
#navigation #hidden > h3 {color: #FFFFFF; text-transform: uppercase;}
#navigation #hidden a {width: 200px; color: #FFFFFF; text-decoration: none; display: block; padding-top: 2px; padding-bottom: 2px; text-transform: uppercase; font-size: 14px; margin: auto;}
#navigation #hidden a:hover {color: #8e44ad;}
#navigation .userpanel > a {font-size: 16px; font-weight: 600;}

我正在使用这个版本的jQuery：

<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>

预览：http://awesomeness.adam.zur.io/ (点击屏幕的左侧)

Answer 1

您似乎并不打算停止使用.stop()的当前动画，因为当鼠标进入/离开并缓存它时，它会出现故障。因为你应该把摩丝改为鼠标，因为它只会触发一次事件。

$("#navigation").mouseenter(function(){
    $(this).stop().animate({
        width: '300px',
        opacity: '1',
    }, 400);
    $("#hidden").css({
        display: 'block',
    });
});

$("#navigation").mouseleave(function(){
    $(this).stop().animate({
        width: '5px',
        opacity: '0.0',
    }, 400);
    $("#hidden").css({
        display: 'none',
    });
});

工作代码