MouseEnter/MouseLeave event is being queued for each activation

I am having an issue with on mouse enter and mouse leave it triggers fine the first time but during the animation if I move the mouse into the animation it causes a bug. After the animation finishes if I go back to do another mouse enter it automatically does a mouse leave as well. This behavior continues until I refresh the page. Its like it storing additional mouse enter and leaves per an event, how can I prevent this? I can provide more information if needed but I really can't seem to solve this at all... Edit: Basically what is occurring is that for each mouse enter it is adding the event to a queue regardless of whether it is currently being executed or not. This queue builds up and continues to execute the events until the queue is empty. I have tried this and it still keeps queueing: $('div#nav-sidebar').off('mouseleave').on('mouseleave', mouseLeaveEvent); $('div#nav-sidebar').off('mouseenter').on('mouseenter', mouseEnterEvent); HTML Current Code below.... var mouseLeaveEvent = function() { console.log('sidebar mouse leave!') $('li#GlasswareCandles').children('ul.menu-items').slideUp(750); $('li#CandleTins').children('ul.menu-items').slideUp(750); $('li#ScentedOils').children('ul.menu-items').slideUp(750); $('li#Air-Fresheners').children('ul.menu-items').slideUp(750); $('li#OtherProducts').children('ul.menu-items').slideUp(750); $(this).children('ul.blog_list.toggle_list').slideUp(1500); return false; }; var mouseEnterEvent = function() { console.log('sidebar mouse enter!') $(this).children('ul.blog_list.toggle_list').slideDown(500); return false; }; $('div#nav-sidebar').off('mouseleave').on('mouseleave', mouseLeaveEvent); $('div#nav-sidebar').off('mouseenter').on('mouseenter', mouseEnterEvent);