0

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

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

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

4

2 回答 2

0

您必须设置overflow为hidden：

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

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

于 2013-02-02T23:52:32.460 回答
0

我回答了一个类似的问题，你应该在后台使用hide()时隐藏<div>它。

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

$('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()

基本上，测试一下。基本概念是基于预期的行动和行为hide。show<div>

于 2013-02-03T00:00:54.303 回答