Menu and Submenu not behaving as expected when hovering erratically

Question

I have a horizontal menu (set out as a list) and when you hover over one of the list items it animates a dropmenu which is a child of the list item.

This works fine if you move the cursor over the menu at a "normal" speed. The problem I have is the behaviour of the menu if you erratically move the cursor over the menu. It leaves previously hovered elements shown still and I have to hover over and out of the dropMenu until they all return to their initial state (height:0).

My jquery for the menu is below:

$('#templateNav > ul > li').bind({
        mouseenter: function() {
            $(this).find(".dropMenu").clearQueue().animate({
                height: 250
            }, 200);
        },

        mouseleave: function() {
            $(this).find(".dropMenu").clearQueue().height(0);
        }
    });

And here's an example of my menu code:

<div id='templateNav'>
    <ul>
        <li>Menu 1<span class='dropMenu'>...</span></li>
        <li>Menu 2<span class='dropMenu'>...</span></li>
        <li>Menu 3<span class='dropMenu'>...</span></li>
    </ul>
</div>

Any ideas?

Answer 1

See this http://jsbin.com/ukuqik/1

$('#templateNav > ul > li').bind({
    mouseenter: function() {
        $(this).find(".dropMenu").stop(true,true).animate({
            height: 250
        }, 200);
    },

    mouseleave: function() {
        $(this).find(".dropMenu").stop(true,true).animate({
            height: 0
        }, 200);
    }
});

And a little better : http://jsbin.com/ukuqik/6

Answer 2

Here is a solution:

Use a variable, and set it when the Animation is done.. Something like:

var isAnimating = false;
mouseenter: function() {
  isAnimating = true; // Here we start
  $(this).find(".dropMenu").clearQueue().animate({
       height: 250
  }, 200, function (){isAnimating=false}); // Now we are done with animation
},
mouseleave: function() {
  if(isAnimating == false) $(this).find(".dropMenu").clearQueue().height(0);
}

Or you may stop the animation when you Move mouse out using .stop().