Using the Interval Argument of the HoverIntent jQuery Plug-in

The well-deserved popularity that jQuery has gained in the last couple of years isn't just because of its  renowned capabilities and its flat learning curve. The flexible model provided by the library allows developers to easily extend its core functionality via additional plug-ins, which come in all sorts of sizes and flavors.

Among the variety of jQuery plug-ins available today, there's one that you'll probably find especially interesting for your daily tasks. Through a simple API, it will let you build rollover effects where the "mouseover" and "mouseout" events can be controlled via a set of configurable options. Yes, as you might already have guessed, I'm talking about "hoverIntent," a cool plug-in developed by Brian Cherne which can be used for implementing rollovers on web pages that deliberately delay the triggering of mouse events according to the user's intention (hence the plug-in name).

Put in a simple way, what "hoverIntent" does is wait long enough before firing up the events, based on a combination of parameters that it uses internally, including the mouse's coordinates, the frequency these coordinates are recorded and compared (a process called polling intervals) and the number of pixels that the mouse is moved across the targeted web page element.

Naturally, simply explaining the benefits offered by the plug-in needs to be properly complemented with some functional code. In previous installments of the series I developed some basic examples that demonstrated how to use the plug-in for creating a delayed rollover using a single div. I also showed how to customize the default behavior of "hoverIntent" via its "sensitivity" argument; that topic was covered in depth in the last chapter.

However, it's valid to point out that there's plenty of ways to tweak how "hoverIntent" does its thing. It provides a few additional parameters which can be used for fine-tuning certain aspects of its behavior. Therefore, in this third part of the series I'm going to discuss how to use the plug-in's "interval" option, which is a very straightforward process.

Now, it's time to discover some extra capabilities that the "hoverIntent" plug-in hides under the hood. Let's jump in!