hoverIntent jQuery Plugin

What is hoverIntent?

hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It is similar to jQuery's hover method . However, instead of calling the handlerIn function immediately, hoverIntent waits until the user's mouse slows down enough before making the call.

Why? To delay or prevent the accidental firing of animations or ajax calls. Simple timeouts work for small areas, but if your target area is large it may execute regardless of intent. That's where hoverIntent comes in...

Examples

jQuery's .hover() ... for reference

$("#demo1 li").hover( makeTall, makeShort );

•  
•  
•  
• hover ignores over/out events from children

jQuery's built-in hover calls handlerIn and handlerOut functions immediately. If you move your cursor back and forth quickly across the tiles you'll see how the immediate execution can lead to problems.

.hoverIntent( handlerIn, handlerOut )

$("#demo2 li").hoverIntent( makeTall, makeShort );

•  
•  
•  
• hoverIntent also ignores over/out events from children

hoverIntent is interchangeable with jQuery's hover. It can use the same exact handlerIn and handlerOut functions. It passes the same this and event objects to those functions.

.hoverIntent( handlerInOut )

$("#demo3 li").hoverIntent( toggleHeight );

hoverIntent can also take a single handlerInOut, just like jQuery's hover.

.hoverIntent( handlerIn, handlerOut, selector )

$("#demo4").hoverIntent( makeTall, makeShort, 'li' );

Unlike jQuery's hover, hoverIntent supports event delegation! Just pass in a selector of a descendant element.

.hoverIntent( handlerInOut, selector )

$("#demo5").hoverIntent( toggleHeight, 'li' );

Unlike jQuery's hover, hoverIntent supports event delegation with handlerInOut.

.hoverIntent( object )

$("#demo6").hoverIntent({
    over: makeTall,
    out: makeShort,
    selector: 'li'
});

To control hoverIntent more precisely and override the default configuration options, pass it an object as the first parameter. The object must at least contain an "over" function. If the "over" function is sent alone, it will act just like handlerInOut.