jquery dropdown menu opens repeatedly upon hover

I've got a bit of a problem with a jquery menu.开发者_如何学Go I works just fine, but if you hover over the buttons 3 or 4 times, the menu will expand 3 or 4 times repetitively, and all you can do it wait for it to quit. Can somebody please tell me how to stop this? Here's the javascript I'm using:

<script type="text/javascript">
$(function () {
      $('#dropMenu .level1 .submenu.submenu').hover(function() {
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000);
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000);
}, function() {
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000);
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000);
});});
</script>

Any insight to this would be greatly appreciated.

Thanks

Hey Robert, I hate when a simple hover action does unexpected results. Over time I've developed a few methods to resolving the flicking of elements.

Assuming you have a menu structure like so;

<div id="nav">
  <ul>
    <li>
      <a href="...">Home</a>
      <ul>
        <li><a href="...">New Products</a></li>
        <li><a href="...">All Products</a></li>
        <li><a href="...">Specials</a></li>
        <li><a href="...">Search</a>
          <ul>
            <li><a href="...">Site</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS something like this;

<style>
  #nav ul li ul{
    display:none;
  }
</style>

jQuery something like this;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
  $("#nav ul li").each(function(){
    $(this).mouseenter(function(){
      $(this).find("ul:first").show();
    }).mouseleave(function(){
      $(this).find("ul:first").hide();
    });
  })
</script>

Notice, I'm using .mouseenter() and .mouseexit() instead of .hover() in this example.

Why .hover() doesn't do what you expect in this example? Hover only works on a single element, when you hover on something within the element, it's a new element.

A great example is on jQuery API Documentation

I hope this clears up your Hover issues.

You could add a variable to indicate when an animation is active and don't allow another one to start, if the previous one hasn't finished.

var isAnimating = false;
$(function () {
      $('#dropMenu .level1 .submenu.submenu').hover(function() {
if (!isAnimating) {
  $(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000);
  $(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000);
  isAnimating = true;
}
}, function() {
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000);
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000);
isAnimating = false;
});});