Controlling Mouseout Events with HoverIntent`s Timeout Argument

With a huge number of jQuery plug-ins available today that allow developers to perform all sorts of clever (and sometimes extremely complex) tasks on web pages, it’s hard to pick one that doesn’t make you deal with a steep learning curve and master a bunch of features that are overkill. Of course, not all the plug-ins are created in the same way, and “hoverIntent,” a small library created by Brian Cherne is a good example of this.

What’s more, “hoverIntent” will let you create delayed rollovers on your web pages by using a single method and a few intuitive arguments -- and most of the arguments are entirely optional. To be frank, this handy plug-in can be run right out of the box without having to leave the comfortable environment that made jQuery so popular, as it behaves like a powerful replacement for the library’s “hover” event handler.

Logically, if you've already had the chance to take a peek at the previous parts of this series, it’s quite probable that you already know how to build more usable rollovers with “hoverIntent” and how to tweak its “sensitivity” and “interval” arguments. In those tutorials I discussed these topics in depth, as usual via a decent variety of code samples.

While admittedly, the plug-in does a great job when used in its default configuration, it’s fair to say that eventually it will be necessary to change its behavior to fit the needs of a particular project. As you saw before, part of this customization process can be accomplished by using the “sensitivity” and “interval” parameters; however the plug-in provides an additional argument.

This new argument is called “timeout.” It permits you to specify a delay in milliseconds for “mouseout” events. This ability comes in especially handy, for instance, when creating more accessible drop-down menus. Considering how helpful this argument can be in different situations, in the lines to come I’m going to demonstrate how to work with it through some easy examples.               

Ready to learn how to further customize the “hoverIntent” plug-in? Then, don’t waste more time in preliminaries; start reading right now!