Writing again to seek help with a script issue on my webpage. I previously posted about a problem with the menu focus a week or two ago on this forum. A user suggested a helpful script, but unfortunately, it has a bug that I can't seem to fix. I've tried various solutions, but the problem persists.
Here is a Fiddle code example that demonstrates the issue: http://jsfiddle.net/PRZYN/15/
$(document).ready(function() {
$('#handle').mouseenter(slideIn);
$("#box").mouseleave(function() {
$(this).animate({
left: "-=180px"
}, "fast");
$('#handle').mouseenter(slideIn);
});
$("[name='skin']").mouseleave(function(e) {
e.stopPropagation();
});
});
function slideIn() {
if ($("#box")) $("#box").animate({
left: "+=180px"
}, "slow");
$(this).unbind("mouseenter");
}
The issue with the script is that when both divs are in an animation state and the user quickly moves the mouse through the animation, the script becomes confused. This results in the menu continuously showing and hiding, which is quite frustrating. There are other scenarios where the bug occurs, but it's challenging to pinpoint. I believe the problem also arises when the user hovers over the div and the mouse stops at a specific point, which varies each time.
I've identified the problem to some extent, but I'm unsure how to solve it. I need to disable all other events on the div (except for .animation()) when the menu is in an animation state, and then re-enable them once the animation is complete, and the user wants to open or hide the menu again.
I hope my question is clear, and I would greatly appreciate any assistance in resolving this issue.
Regards, Miha