Plugging in jQuery HoverIntent for Sliding Panel

Question

I have the following code running to create a dropdown accordion that reveals the hidden div "#top_mailing_hidden" when the div "#top_mailing" is hovered. The problem is that when I interrupt the animation by mousing Out and then mousing Over again it aborts the animation and screws up.

I have the following code:

//Top Mailing List Drop down animation
$(document).ready(function () {

$('#top_mailing')
.bind("mouseenter",function () {
    $("#top_mailing_hidden").stop().slideDown('slow');
})
.bind("mouseleave",function () {
    $("#top_mailing_hidden").stop().slideUp('slow');
});

});

Brian Cherne's plugin says to call the hoverIntent function as follows (where 'makeTall' and 'makeShort' are defined functions:

$("#demo2 li").hoverIntent( makeTall, makeShort )

I think the best solution for the behavior I'm getting is to use Brian Cherne's "HoverIntent" jQuery plugin. Problem is I don't know how/where to insert the code into the above to call the HoverIntent plugin. It says to call ".hoverIntent" rather than .hover but my code is using .bind("mouseEnter"... someone PLEASE HELP!

Answer 1

You can still use anonymous functions with hoverIntent:

$('#top_mailing').hoverIntent(function () {
   $("#top_mailing_hidden").stop().slideDown('slow');
 }, 
 function () {
   $("#top_mailing_hidden").stop().slideUp('slow');
});