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

jquery悬停动画高度（切换）

3 个答案: