Home

Welcome to the jquery-distanceListener wiki!

jQuery distanceListener is a jQuery plugin that implements two new events : “mouseapproach” and “mouseretreat”

One special point of those events is that it’s possible to define a refresh rate for them. For example, I can bind the approach event to an element of my page, with a refresh rate of 100ms, and than the event wont be triggered more than 10 times a second. This is to get better performances when making animations on mouse distance changes. Has I can choose the refresh rate, I can make it slower if my animation functions are too big.

some examples :

using bind :
$(‘h1’).bind(‘mouseapproach’, function(e) {console.log(‘mouse approach. distance : ’+e.distance+’px’);});
$(‘h1’).bind(‘mouseretreat’, function(e) {console.log(‘mouse retreat. distance : ’+e.distance+’px’);});

with options :
$(‘h1’).bind(‘mouseapproach’, {checkInterval: 200}, function(e) {console.log(‘mouse approach. distance : ’+e.distance+’px’);}); // check every 200ms

using shortcuts :
$(‘h1’).mouseapproach(function(e) {console.log(‘mouse approach. distance : ’+e.distance+’px’);});
$(‘h1’).mouseapproach(function(e) {console.log(‘mouse approach. distance : ’+e.distance+’px’);}, 200); // 200ms refresh rate

$(‘h1’).mouseretreat(function(e) {console.log(‘mouse approach. distance : ’+e.distance+’px’);});