我有一个隐藏子菜单的菜单。
当我鼠标悬停在菜单项上时,我正在设置子菜单的动画,并在鼠标移出时关闭。
当用户将鼠标放在很多菜单项上时,所有动画都会排队。
为了解决排队问题,我在动画之前添加了一个stop()。
这导致更糟糕的问题,子菜单的高度减小到我鼠标时的大小。
答案 0 :(得分:7)
通过在结束动画结束后将高度设置为自动来解决问题。
function leftMenuOut() {
var obj = $(this).find(".toggleThisLevel2");
if (obj.length == 0) {
return true;
}
$(this).removeClass("opened");
obj.stop().animate({ height: "hide" }, { queue: false, complete: function() { $(this).css("height", "auto"); } });
return false;
}
如果你隐藏的元素上有填充,你会发现填充也会缩小。只需添加一个包含元素,然后改变它的高度,但不要添加任何填充或边距。
答案 1 :(得分:1)
这是一个已在jQuery 1.7.2中修复的错误:http://bugs.jquery.com/ticket/8685
答案 2 :(得分:0)
为什么不使用切换功能? 我认为你必须将ul元素的高度设置回原始高度。 目前高度保留在样式属性中,因此你的ul只有你将鼠标移出元素的高度。
答案 3 :(得分:0)
您可以存储变量来存储菜单是否打开。
当您将鼠标悬停在打开菜单集var menuOpening = true;
上然后回调打开的动画设置menuOpening = false;
,然后您可以检查menuOpening是否只打开一个新菜单项
然后你可以玩这个来获得看起来好多了的东西。我以前有类似的工作,但找不到代码。
答案 4 :(得分:0)
由于我通过Google发现了这个问题,并且这些修复程序都不适合我,我应该提一下我是如何解决问题的。
这是我的原始代码:
elem1.stop().slideUp();
elem2.find("div.page:nth-child(" + myVar + ")").stop().slideDown();
这导致在快速来回切换时高度被切断。
然后我在slideDown上的.hide()
之后添加了.stop()
elem1.stop().slideUp();
elem2.find("div.page:nth-child(" + myVar + ")").stop().hide().slideDown();
现在高度不会反弹,也不会被切断。希望这有助于将来的某个人!