This time I will share jQuery Plugin and tutorial about Hover Intent Detection Plugin With jQuery – hoverIntent, hope it will help you in programming stack.
| File Size: | 10.8 KB |
|---|---|
| Views Total: | 3206 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A lightweight yet useful jQuery user intent detection plugin to extend the jQuery’s hover method that delays the handlerIn function until the user actually wants to hover over a specific element. Great for preventing the accidental firing of hover events when the mouse pointer enters and leaves the elements.
How to use it:
1. Load the JavaScript file ‘jquery.hoverIntent.js’ plugin after jQuery JavaScript library and the hoverIntent is ready for use.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jquery.hoverIntent.js"></script> |
2. Basic usage. Just like the .hover() method.
- handlerIn: function OR configuration object
- handlerOut: function OR selector for delegation OR undefined
1 |
.hoverIntent( handlerIn, handlerOut ) |
2 |
.hoverIntent( handlerInOut ) |
3. Basic usage. With event delegation.
- handlerIn: function OR configuration object
- handlerOut: function OR selector for delegation OR undefined
- selector: selector OR undefined
1 |
.hoverIntent( handlerIn, handlerOut, selector ) |
2 |
.hoverIntent( handlerInOut, selector ) |
4. Activate the plugin using a basic configuration object.
01 |
.hoverIntent({ |
02 |
03 |
// The number of milliseconds hoverIntent waits between reading/comparing mouse coordinates. |
04 |
// When the user's mouse first enters the element its coordinates are recorded. |
05 |
// The soonest the "over" function can be called is after a single polling interval. |
06 |
// Setting the polling interval higher will increase the delay before the first possible "over" call, but also increases the time to the next point of comparison. |
07 |
interval: 100, |
08 |
09 |
// If the mouse travels fewer than this number of pixels between polling intervals, then the "over" function will be called. |
10 |
// With the minimum sensitivity threshold of 1, the mouse must not move between polling intervals. |
11 |
// With higher sensitivity thresholds you are more likely to receive a false positive. Note that hoverIntent r7 and earlier perform this comparison using rectilinear distance, whereas more recent versions compare against Euclidean (straight-line) distance for better accuracy and intuition. |
12 |
// If you are upgrading from an older version, you may want to verify that the desired behavior is preserved. |
13 |
sensitivity: 6, |
14 |
15 |
// A simple delay, in milliseconds, before the "out" function is called. |
16 |
// If the user mouses back over the element before the timeout has expired the "out" function will not be called (nor will the "over" function be called). |
17 |
// This is primarily to protect against sloppy/human mousing trajectories that temporarily (and unintentionally) take the user off of the target element... giving them time to return. |
18 |
timeout: 0 |
19 |
|
20 |
}) |
Changelog:
2019-10-06
- v1.10.1: Fixes a possible race condition by checking for hoverIntent data before attempting to access it
2019-02-26
- v1.10.0
2017-09-01
- v1.9.0
This awesome jQuery plugin is developed by briancherne. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net
