Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save scottjehl/851038 to your computer and use it in GitHub Desktop.
Save scottjehl/851038 to your computer and use it in GitHub Desktop.
Hoverintent-like events using special events pattern so they can be used via bind and live
/*
* jQuery special events for delayedEnter, delayedLeave, and delayedHover
* Author: Scott Jehl, scott@filamentgroup.com
* Copyright (c) 2011 Filament Group
* licensed under MIT
* note: Each event can be used with bind or live event handling as you would use mouseenter,mouseleave, and hover
* events fire after 200ms timeout
*/
(function($){
//delayedEnter event
$.event.special.delayedEnter = {
enabled: true,
setup: function() {
var thisObject = this,
$this = $( thisObject ),
timeout = 200,
hovering,
timer;
function trigger( event ) {
var originalType = event.type;
event.type = "delayedEnter";
$.event.handle.call( thisObject, event );
event.type = originalType;
}
$this.bind({
"mouseenter": function( event ) {
if ( !$.event.special.delayedEnter.enabled ) {
return;
}
hovering = true;
clearTimeout( timer );
timer = setTimeout(function() {
if ( hovering ) {
trigger( event );
}
}, timeout );
},
"mouseleave": function(){
hovering = false;
}
});
}
};
//make available as method
$.fn.delayedEnter = function( fn ) {
return fn ? this.bind( "delayedEnter", fn ) : this.trigger( "delayedEnter" );
};
$.attrFn.delayedEnter = true;
//delayedLeave event
$.event.special.delayedLeave = {
enabled: true,
setup: function() {
var thisObject = this,
$this = $( thisObject ),
timeout = 300,
hovering,
timer;
function trigger( event ) {
var originalType = event.type;
event.type = "delayedLeave";
$.event.handle.call( thisObject, event );
event.type = originalType;
}
$this.bind({
"mouseleave": function( event ) {
if ( !$.event.special.delayedLeave.enabled ) {
return;
}
hovering = false;
clearTimeout( timer );
timer = setTimeout(function() {
if ( !hovering ) {
trigger( event );
}
}, timeout );
},
"mouseenter": function(){
hovering = true;
}
});
}
};
//make available as method
$.fn.delayedLeave = function( fn ) {
return fn ? this.bind( "delayedLeave", fn ) : this.trigger( "delayedLeave" );
};
$.attrFn.delayedLeave = true;
//proxy similar to jQuery's hover
//if leaveCallback isn't defined, enterCallback will apply to both
$.fn.delayedHover = function( enterCallback, leaveCallback ){
return this.delayedEnter(enterCallback).delayedLeave( leaveCallback || enterCallback );
};
})(jQuery);
@mathiasbynens
Copy link

Line 102: Why not just $.attrFn.delayedLeave = true? Similar for line 54.
Line 107: No need for $(this), this is already a jQuery object.

@scottjehl
Copy link
Author

fixed. thanks!

@petersendidit
Copy link

@ixisio
Copy link

ixisio commented Mar 6, 2013

@ixisio
Copy link

ixisio commented Nov 27, 2013

did some changes to get it running with v1.9.0 and later
https://gist.github.com/5098447

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment