jquery hover animate height (toggle)

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 :)

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();
});

You need to set your height to specific values instead of using toggle. When someone moves their mouse off/onto the object before it's done animating, it saves the toggled height at whatever percent it was at mid animation.

To make it dynamic, try something like this:

$(document).ready(function() {

    var hoverObject = "#menu .content ul li.parent";

    var originalHeight = $(hoverObject).height();

    $(hoverObject).hover(function(){

        $(this).find("ul").stop().animate({ height: 0 }, 150, "easeInSine");
    }, function(){

        $(this).find("ul").stop().animate({ height: originalHeight }, 350, "easeInSine");
    });
});

I had the same problem as you, and this is the way I fixed it:

$("#menu .content ul li.parent").hover(function(){
    $(this).find("ul").slideDown(150, "easeInSine");
}, function(){
    $(this).find("ul").slideUp(350, "easeInSine");
});