Question

I’m sure this is a common problem and I have tried numerous threads on this site to try to fix my issue, but I can’t seem to get it working properly. Basically I have a child menu which I need shown when the parent has been hovered over, but if you move your mouse off of the menu item before it’s finished loading, when you hover over it again, the new toggle height is wrong. If that makes sense? The site I’m trying to get it working on is here:

http://annawhitlam.website.2011.360southclients.com/

(The About Us menu has the children)

And my code is:

$("#menu .content ul li.parent").hover(function(){
  $(this).find("ul").stop().animate({ height: "toggle" }, 150, "easeInSine");
}, function(){
  $(this).find("ul").stop().animate({ height: "toggle" }, 350, "easeInSine");
});

Any help would be appreciated 🙂

Answer 1

Alternatively you can try this instead of stopping the animation.

$("#menu .content ul li.parent").hover(function(){
  if($(this).find("ul:not(:animated)").length)
     $(this).find("ul").animate({ height: "toggle" }, 150, "easeInSine");
  else
     $(this).find("ul").show();
}, function(){
  if($(this).find("ul:not(:animated)").length)
      $(this).find("ul").animate({ height: "toggle" }, 350, "easeInSine");
  else
      $(this).find("ul").hide();
});