How to use hoverIntent plugin?

Question

I'm new to jQuery and want to add the hoverIntent plugin to my site as my navigation menu. I have been referred to Brian Cherne's site and see the code to download, but I'm not quite sure how to put it all together to make it work.

Can someone post a sample of what the HTML code should look like with the appropriate hoverIntent plugin code added in? Or refer me to a reference?

I'd be most appreciative! Thanks!

Answer 1

hoverIntent plugin follows the same exact api signature of the jQuery hover method. You can get usage examples at http://cherne.net/brian/resources/jquery.hoverIntent.html, just look at the source code.

First include jQuery into the head:

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

after that download and include hoverIntent plugin:

<script type="text/javascript" src="path/to/jquery.hoverIntent.js"></script>

then you can use hoverIntent() method on any jQuery element like this

$(element).hoverIntent(whatToDoWhenHover, whatToDoWhenOut);

element is a jQuery selector like '#id' or '.class' or 'div > .something', whatToDoWhenHover and whatToDoWhenOut are functions that will be executed when the user starts hovering the element and when he stops. Just like old good jQuery hover.

Example