Question

我对jquery / javascript很新，但我创建了一个主导航元素。想法是用户将鼠标悬停在特定<li>上（分为2 divs）。启动时只能看到div1。当悬停发生时，div1上的高度动画为0以显示div2。

但是，当高度设置为0时，div1的内容（特别是白色h2和h3类型）仍然可以在div2的类型后面显示（间歇性地）。如果你弄乱了<li>，你可以让它停止发生，但我无法记录错误或弄清楚为什么它会在某些时候消失。

see http://jsfiddle.net/pappley/BGy6R/3/

Answer 1

您必须将overflow设置为hidden：

.main-link-title {
    height: 200px;
    overflow: hidden;
}

这是你的小提琴：http://jsfiddle.net/BGy6R/4/

Answer 2

我回复了similar question，您应该使用hide()隐藏<div>。\ n \ n

查看您的代码，您似乎可以这样做：

$('li').hoverIntent(function() {
    $(this).children(':first').stop(true, false).animate({height: '0'}, 1000, 'easeOutQuad').hide();
}, function() {
    $(this).children(':first').stop(true, false).show().animate({height: '200px'}, 1000, 'easeOutQuad');
});

我刚在第一次通话结束时添加了.hide()，似乎将<div>的高度设置为0？然后在第二个show()之前添加了animate()？

基本上，测试一下。基于动作＆amp;动作的基本概念是hide或show <div>。行为意图。

.hover（）功能正常工作，但应隐藏的元素仍然可见

2 个答案: