At the top of my page, there is a menu button that has a CSS :hover animation when hovered over.
$('.menu_button').click(function () {
$(this).animate({
top: '-=50'
}, 250);
$('nav').delay(250).animate({
top: '+=50'
}, 250);
$('nav').mouseleave(function () {
$(this).delay(750).animate({
top: '-=50'
}, 250);
$('.menu_button').delay(1000).animate({
top: '+=50'
}, 250);
});
});
When I click on the menu button, it slides up and the menu slides down as shown in the fiddle. Upon mouse leave, the animations reverse direction after 750ms.
However, after playing around with it 2 or 3 times, the menu button sometimes slides down farther than its original position. Occasionally, it even disappears out of view at the top. I can't pinpoint why or when this occurs. The glitch seems to happen when hovering above the top inside the div, rather than clicking directly on the button.
Any suggestions or ideas on what could be causing this issue?
Here is the fiddle: http://jsfiddle.net/dennym/c5D22/
Regards, dennym