JQuery Broken Animation - Div иногда не исчезает ⇐ Jquery

[Anonymous]

Последние дни я пытался сделать боковую панель с анимацией jQuery, но что -то, вероятно, пошло не так, и, кажется, она, кажется, немного сломана и не полностью работает, так как #Navigation (DIV) иногда даже не исчезает, это, вероятно, зависит от места, где я выхожу из мыши, когда он исчезает только в некоторых местах. #navigation продолжает появляться и исчезать снова и снова, столько раз, как я попадал в угол.
Как я могу исправить эти маленькие, но провоцирующие проблемы?

Код: Выделить всё

Navigation

[url=#]Blog[/url]
[url=#]Live[/url]
[url=#]Events[/url]
[url=#]Genres[/url]
[url=#]The team[/url]
[url=#]Changelog[/url]


[url=#]Sign in[/url]
[url=#]Sign up[/url]





$("#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',
});
});

< /code>

и хорошо ... вот CSS: < /p>

#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;}
< /code>

И я использую эту версию jQuery: < /p>

Предварительный просмотр: http://awesomense.adam.zur.io/ (нажимайте левую сторону экрана)

Подробнее здесь: https://stackoverflow.com/questions/345 ... -sometimes