.hover() functionality working but elements that should be hidden are still visible

Question

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.

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

Answer 1

You have to set the overflow to hidden:

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

Here's your fiddle: http://jsfiddle.net/BGy6R/4/

Answer 2

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.