CODEWITHSUNDEEP
jqueryheighttogglejquery-animate
SoulieBaby
SoulieBaby

Reputation: 5471

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

Upvotes: 1

Views: 6268

Answers (3)

Niki
Niki

Reputation: 21

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

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

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

Upvotes: 4

Steve Robbins
Steve Robbins

Reputation: 13812

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

Upvotes: 2

Related Questions