Skip to content

Instantly share code, notes, and snippets.

@scottjehl

scottjehl/delayedEnter, delayedLeave, and delayedHover.js

Created March 2, 2011 14:48
Download ZIP

Revisions

  1. Scott Jehl revised this gist Mar 2, 2011. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions delayedEnter, delayedLeave, and delayedHover.js
    View file
    Original file line number Diff line number Diff line change
    @@ -51,7 +51,7 @@ $.event.special.delayedEnter = {
    $.fn.delayedEnter = function( fn ) {
    return fn ? this.bind( "delayedEnter", fn ) : this.trigger( "delayedEnter" );
    };
    $.attrFn[ "delayedEnter" ] = true;
    $.attrFn.delayedEnter = true;



    @@ -99,11 +99,11 @@ $.event.special.delayedLeave = {
    $.fn.delayedLeave = function( fn ) {
    return fn ? this.bind( "delayedLeave", fn ) : this.trigger( "delayedLeave" );
    };
    $.attrFn[ "delayedLeave" ] = true;
    $.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);
    return this.delayedEnter(enterCallback).delayedLeave( leaveCallback || enterCallback );
    };
    })(jQuery);
  2. Scott Jehl renamed this gist Mar 2, 2011. 1 changed file with 0 additions and 0 deletions.
    0 delayedEnter, delayedLeave, and delayedHover → ...dEnter, delayedLeave, and delayedHover.js
    View file
    File renamed without changes.
  3. Scott Jehl revised this gist Mar 2, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions delayedEnter, delayedLeave, and delayedHover
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@
    * 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,
    @@ -106,4 +106,4 @@ $.attrFn[ "delayedLeave" ] = true;
    $.fn.delayedHover = function( enterCallback, leaveCallback ){
    return $(this).delayedEnter(enterCallback).delayedLeave(leaveCallback || enterCallback);
    };

    })(jQuery);
  4. Scott Jehl created this gist Mar 2, 2011.
    109 changes: 109 additions & 0 deletions delayedEnter, delayedLeave, and delayedHover
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,109 @@
    /*
    * jQuery special events for delayedEnter, delayedLeave, and delayedHover
    * Author: Scott Jehl, [email protected]
    * 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
    */

    //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);
    };