jump to navigation

An Introduction to the hoverIntent() JQuery plugin September 25, 2011

Posted by Tournas Dimitrios in JQuery.
trackback

Even though in some cases users will move the mouse across a menu following a common pattern , this doesn’t mean that they intend to visit a specific section . Obviously, the result of this process will be a bunch of menu sections expanding and shrinking alternately without a specific purpose . Can you imagin what could happen if a menu-button is linked to an ajax functionality( for requesting a image-gallery ) which executes specified code after  the end of the download cycle , obviously a functionality that was not the initial intention of the user . I hope my example illustrated a common problem that could happen by this immediate  mouse-over  reaction .    The “hoverIntent” jQuery plug-in is  for creating delayed rollovers in a truly painless fashion . If you’re familiar with the basics of jQuery , then getting the plug-in up and running even without checking its official documentation is a simple task .

Let first demonstrate the standard way  of  jQuery to control  the height of a sample div when hovering on it .

$(document).ready(function() {

$("#container").hover(

// expand the height of the container

function() {

$(this).animate({"height": 200}, 300);

},

// shrink the height of the container

function() {

$(this).animate({"height": 100}, 300);

}

);

});

In this code-example , the “hover” event handler provided by jQuery has been attached to a basic div, identified  as “container”  The result of this process is pretty easy to guess: assuming that you have a working version of the library already installed on your machine , if you give this example a try on your own browser , you should see that the height of the targeted div gets expanded and shortened alternatively when the mouse is placed over it .

I’m going to rewrite the previous example using the “hoverIntent()” plug-in , and   create a rollover that will wait for a predefined time for triggering their “mouseover” and “mouseout” events .

$(document).ready(function() {

$("#container").hoverIntent(mousein_triger , mouseout_triger);

});

// expand the height of the container

function mousein_triger(){

$(this).animate({"height": 200}, 300);

}

// reset the height of the container

function mouseout_triger() {

$(this).animate({"height": 100}, 300);

}

It’s clear to see that the “hoverIntent” plug-in can be used directly as a replacement for the “hover” jQuery’s event handler . In this particular case , the plug-in’s workhorse method ” uses two callback functions which will be invoked in response to “mouseover” and “mouseout” events respectively .  Unlike the example that you saw previously, these animations will not be triggered immediately, as the plug-in will wait until the mouse has been situated long enough on the targeted element .

While “hoverIntent” can be implemented right out of the box without any tweaks , the plug-in also accepts a number of additional parameters that can be easily modified at will to customize the behavior of rollovers . Visit the official website for more examples . Download the minified version from the official site .

Advertisements

Comments»

1. hoverIntent use id of hovered element to change class - April 15, 2013

[…] trying to reveal content using hoverIntent without writing specific conditions for each id. I would like to have the id passed to the mouse in […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s