Question

I’m having difficulty getting the jQuery special event hoverintent to work with mouseleave functions. (I’ve also tried substituting mouseout for mouseleave)

I need to utilize the same functionality so that the mouseleave event is only fired when the user’s mouse has slowed down beneath the sensitivity threshold.

I’ve included the script below, and have also uploaded a working example to http://click2fit.com/test_files/accordion_hoverintent.html

$(function () {     
    $(".accordion_close_leave").accordion({
                event: "click hoverintent",
                collapsible: true,
                active: false,     
                autoHeight: false,
             }).mouseleave(function() {
    $(this).accordion({ active: false}); 
    });  

var cfg = ($.hoverintent = {
    sensitivity: 100,
    interval: 500
});
$.event.special.hoverintent = {
    setup: function() {
        $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
    },
    teardown: function() {
        $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
    },
    handler: function( event ) {
        var that = this,
            args = arguments,
            target = $( event.target ),
            cX, cY, pX, pY;
        function track( event ) {
            cX = event.pageX;
            cY = event.pageY;
        };
        pX = event.pageX;
        pY = event.pageY;
        function clear() {
            target
                .unbind( "mousemove", track )
                .unbind( "mouseout", arguments.callee );
            clearTimeout( timeout );
        }
        function handler() {
            if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
                clear();
                event.type = "hoverintent";
                event.originalEvent = {};
                jQuery.event.handle.apply( that, args );
            } else {
                pX = cX;
                pY = cY;
                timeout = setTimeout( handler, cfg.interval );
            }
        }
        var timeout = setTimeout( handler, cfg.interval );
        target.mousemove( track ).mouseout( clear );
        return true;
    }
};

Answer 1

It turns out that jQuery’s hoverintent special event code won’t work here because it was designed specifically for inclusion with Accordion’s event option (which is defined as the event that accordion headers react to in order to activate the associated panel).

The good news is that Brian Cherne’s hoverintent plugin does 😀 I’ve included the script below, and a working fiddle is available here: http://jsfiddle.net/chayacooper/GZV5V/26/

It’s important to remember to bind the mouseleave to the accordion itself so that it doesn’t get triggered until the user takes their mouse off the entire accordion. There is a small issue with double activation if the user immediately clicks the header when moving into it, but I was willing to accept that in order to be able to use Select elements inside accordions.

$(document).ready(function() {
$("#Trigger2").accordion({
    active: false,
    collapsible: true
}).hoverIntent({
    over: function() {},
    out: function() {
        $('.ui-accordion-header-active', this).trigger('click').blur();
    },
    timeout: 1000
})

.children('h3').hoverIntent({
    over: function() {
        $(this).not('.ui-accordion-header-active').trigger('click');
    },
    out: function() {},
    timeout: 1000
});
});