HoverIntent hover not working

Question

JSFiddle -http://jsfiddle.net/4aHmv/

In my jsfiddle i am trying to create a drop down menu with a hover action which pulls down the sub menu when the mouse is hovered over.

Here is my hoverintent code: Im not sure if im doing something wrong.

$(".scooters").hoverIntent(makeTall,makeShort);

function makeTall(){$('.scooters').mouseenter(function(){
    $(this).find('.cbp-hrsub').slideDown();
});}

function makeShort(){$('.scooters').mouseleave(function(){
    $(this).find('.cbp-hrsub').slideUp();
});}

In the hoverintent function i just used the code i created which uses the jquery hover.

$('.scooters').mouseenter(function(){
    $(this).find('.cbp-hrsub').slideDown();
});
$('.scooters').mouseleave(function(){
    $(this).find('.cbp-hrsub').slideUp();
});

Uncommenting this and commenting the hoverintent code in jsfiddle will make it work but with the jquery hover. Is there something different i need to do in the hoverintent to make it work.

Thanks.

Answer 1

first, hoverIntent is jQuery plugin so you need to add jQuery to jsfiddle

second, you cannot use plugin before its code implemented, it is also about horizontal menu

third, you cannot use functions that are not yet declared so makeTall and makeShort must be declared before hoverIntent(makeTall,makeShort)

fourth, you dont need to mouseenter/leave inside makeTall/makeShort, hoverIntent already does everything you need

working feedle