Essentially, I am facing an issue with a <nav> element that is supposed to expand from left to right upon mouseover. However, sometimes when quickly moving the cursor over and then out of the element, it expands without animation, which should not be happening.
Below is the HTML code:
$('#navigation').hover(function() {
$(this).animate({
left: 190
}, {
duration: 500
});
}, function() {
$(this).animate({
left: 0
}, {
duration: 1000,
queue: false
});
});nav.menu-nav {
margin-left: -190px;
width: 200px;
height: 100%;
position: fixed;
background-color: #edf0f3;
border-right: 1px solid #f7f8fa;
}
/* CSS code continues... */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylsheet" type="text/css">
<!-- HTML code snippet continues... -->
If you can pinpoint where I might be going wrong in this setup (or if you have any suggestions for improvement), please share your insights.
Thank you!