Using All of the HoverIntent jQuery Plug-in`s Options
In this penultimate chapter of the series, you will learn how to implement a basic rollover by using all of the parameters accepted by the “hoverIntent” plug-in at the same time. Even though you'll probably want to assign custom values to fewer arguments, I believe that building a fully-tweaked rollover is an educational and fun experience.
Using All of the HoverIntent jQuery Plug-in`s Options (Page 1 of 4 )
Have you ever thought that building delayed rollovers on web pages was a painful experience that always forced you to deal with the complexities and quirks of JavaScript timers? Well, before the release of jQuery, your opinion would be perfectly valid. However, things have changed for the better now that jQuery is the most popular contender in the field of JavaScript abstraction libraries. Indeed, implementing this classic effect is now a straightforward process that can be accomplished in a few simple steps.
Of course, if you're still not convinced, you should take a peek at "hoverIntent," a handy plug-in developed by Brian Cherne. It will let you build accessible rollovers by adding programmatically custom delays to their "mouseover" and "mouseout" events. To put it simply, the plug-in acts like a powerful replacement for the "hover" event handler of jQuery, making easy to create this kind of rollover without having to leave the friendly and compact API provided by the library.
In addition, "hoverIntent" offers a decent range of optional arguments that make it simple to customize its default behavior. These include the ability to tweak its sensitivity and polling intervals, and even add a tailored delay to "mouseout" events. To demonstrate how flexible the plug-in is, in previous parts of this series I coded some examples that showed how to alter each of the aforementioned arguments one at a time. This process was hopefully very easy for you to grasp.
It's fair to note, though, that "hoverIntent" will permit you manipulate all of its options at the same time. This deserves a close look, because in many cases you'll want to fine-tune the way the plug-in works by tweaking every single argument. If you're interested in learning how to accomplish this, in this penultimate installment of the series I'm going to set up an example for you that will create a custom rollover using all of the plug-in options discussed so far.
Does my proposal sound engaging enough for you? Then jump ahead and begin reading!