我确定这是一个常见的问题,我在这个网站上尝试了很多线程来尝试修复我的问题,但我似乎无法让它正常工作。基本上我有一个子菜单,我需要在父母盘旋时显示,但是如果你在完成加载之前将鼠标从菜单项移开,当你再次将鼠标悬停在它上面时,新的切换高度是错误的。如果这有道理?我试图让它继续工作的网站就在这里:
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");
});
任何帮助将不胜感激:)
答案 0 :(得分:4)
或者你可以试试这个,而不是停止动画。
$("#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();
});
答案 1 :(得分: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");
});
});
答案 2 :(得分:0)
我和你有同样的问题,这就是我修复它的方式:
$("#menu .content ul li.parent").hover(function(){
$(this).find("ul").slideDown(150, "easeInSine");
}, function(){
$(this).find("ul").slideUp(350, "easeInSine");
});