jQuery hoverIntent not working, but hover does

Question

I have the following code:

$(document).ready(function(){
    $(".yearInner").hide();

    $(".year", this).hover(
        function () {
            $(".yearInner", this).slideToggle();
        }
    );

});

It hides the div with class yearInner, and then when the containing div with class year is hovered over, the yearInner div toggles on.

Works fine, put I'd like to use the hoverIntent plug-in instead of hover. Doesn't work at all with hoverIntent. Suggestions?

Div structure for reference:

<div class="year">
    2009  
    <div class="yearInner">
        More Info...
    </div>
</div>
<div class="year">
    2008
    <div class="yearInner">
        More Info...
    </div>
</div>

Answer 1

You need to split the hover/leave callbacks to use that plugin, like this:

$(".year", this).hoverIntent(function () { 
   $(".yearInner", this).slideDown();
}, function() {
   $(".yearInner", this).slideUp("fast"); 
});

Not sure why there isn't an override like jQuery has in core that accepts a single function to run in both cases, but this is the fix. Note: .slideToggle() still works just fine, I just added a bit of variety in.

Answer 2

This helped me a lot when I was working on something similar: http://cherne.net/brian/resources/jquery.hoverIntent.html