You have to set the overflow
to hidden
:
.main-link-title {
height: 200px;
overflow: hidden;
}
Here's your fiddle: http://jsfiddle.net/BGy6R/4/
質問
I'm pretty new to jquery / javascript but I've created a main navigation element. The idea is that a user hovers over a specific <li>
(that is split into 2 divs
). Only div1 is visible to start. When hover occurs the height on div1 is animated to 0 to reveal div2.
However, when the height animates to 0 the content of div1 (specifically look for the white h2 and h3 type) is still visible behind type of div2 (intermittently). If you mess with the <li>
's you can get this to stop happening but I can't log an error or figure out why it disappears at some points.
解決
You have to set the overflow
to hidden
:
.main-link-title {
height: 200px;
overflow: hidden;
}
Here's your fiddle: http://jsfiddle.net/BGy6R/4/
他のヒント
I answered a similar question and you should use hide()
to hide the <div>
when it is offstage.
Looking at your code, it seems you could do this:
$('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');
});
I just added a .hide()
at the end of the first call which appears to set the height of the <div>
to 0
? And then added a show()
prior to the animate()
in the second one?
Basically, test that out. The basic concept is to either hide
or show
the <div>
based on the actions & behavior intended.