Tweaking the Sensitivity of the HoverIntent jQuery Plug-in

Have you ever wanted to create clever rollover effects on your web pages that deliberately delay the execution of "mouseover/mouseout" events to prevent incidental calls to JavaScript functions or triggering undesired AJAX HTTP requests? Then you'll appreciate the "hoverIntent" plug-in, a small but powerful extension of jQuery that will let you control, via intuitive parameters, how long an HTML element will wait before triggering the aforementioned events when the mouse is placed over it.

Building delayed rollovers by means of plain JavaScript timers or through the "hoverIntent" plug-in may seem to be pointless at first glance, but this is a misconception, believe me. In reality, rollovers that are implemented in this way are generally more usable, even though they're a little bit harder to create than the ones that expose a standard behavior.

If you've already read the tutorial that precedes this one, you probably have a clear idea of how to use the "hoverIntent" plug-in to build a simple rollover animation on an (X)HTML document. In that case, the target element being animated was a basic div whose width was alternately expanded and contracted when a cursor hovered on it. Of course, the most interesting aspect of this process was the short delay added to the animation's "mouseover" event. This was achieved in a snap thanks to the flexibility offered by the plug-in's main method, not surprisingly called "hoverIntent" as well.

Speaking of flexibility, delayed rollovers can be easily customized via some optional arguments taken by the "hoverIntent()" method. To demonstrate how to accomplish this, in this second installment of the series I'm going to show how to modify the default behavior of the plug-in by tweaking one of these incoming arguments, called "sensitivity."

Want to see how this will be done in a few simple steps? Then jump ahead and begin reading!