jQuery悬停动画高度（切换）

Question

我确定这是一个常见问题，并且我已经在此站点上尝试了许多线程来尝试解决我的问题，但是我似乎无法使其正常运行。 基本上，我有一个子菜单，当父菜单悬停在上面时，我需要显示该菜单，但是如果在完成加载之前将鼠标从菜单项上移开，则当再次将鼠标悬停在菜单上时，新的切换高度是错误的。 那有道理吗？ 我正在尝试使其运行的网站在这里：

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

（关于我们菜单中有孩子）

我的代码是：

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

任何帮助，将不胜感激 ：）

Answer 1

或者，您可以尝试此操作而不是停止动画。

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

Answer 2

您需要将高度设置为特定值，而不是使用toggle 。 当有人在完成动画之前将鼠标移开/移到对象上时，它将切换的高度保存为动画中期的百分比。

要使其动态，请尝试以下操作：

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

Answer 3

我和你有同样的问题，这就是我解决它的方法：

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