jquery悬停动画高度（切换）答案

【问题标题】：jquery hover animate height (toggle)jquery悬停动画高度（切换）
【发布时间】：2011-10-15 15:55:20
【问题描述】：

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

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

任何帮助将不胜感激:)

【问题讨论】：

标签： jquery height toggle jquery-animate

【解决方案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();
});

【讨论】：

【解决方案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");
    });
});

【讨论】：

有没有办法让它动态化？由于高度可能会改变，仅此而已。

【解决方案3】：

我遇到了和你一样的问题，我就是这样解决的：

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

【讨论】：