jquery悬停动画高度（切换）

Posted 2023-05-08

【中文标题】jquery悬停动画高度（切换）

【英文标题】：jquery hover animate height (toggle)

【发布时间】：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");
);

任何帮助将不胜感激:)

【参考方案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");
);