Question

I’m using a jquery-ui accordion that opens a section on mouse hover instead of on click, however I’ve noticed if you mouse over multiple items quickly, the item that gets selected is the first item your mouse was over, not the last one.

You can test this out on either their demo page or this copy of the demo on jsfiddle: Simply mouse over the last item so it expands, then move your mouse quickly to the first item, passing the 3nd and 2rd item as you go. The end result is the 3nd item is open, although your mouse is over the first item. (You can also do it in the reverse, but its easiest to duplicate the problem going from bottom to top)

How can I prevent this behavior from happening so the final item that is open is the one the mouse is over, and not the first item the mouse went over?

Answer 1

jQuery UI has implemented the hoverIntent functionality for their accordion selections to combat animation queue issues. The snippet they used is as follows ->

//on DOM ready
$(function() {
    $("#accordion").accordion({
    event: "click hoverintent"
);
});

var cfg = ($.hoverintent = {
sensitivity: 7,
interval: 100
});

$.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 self = 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";
        // prevent accessing the original event since the new event
        // is fired asynchronously and the old event is no longer
        // usable (#6028)
        event.originalEvent = {};
        jQuery.event.handle.apply( self, args );
        } else {
        pX = cX;
        pY = cY;
        timeout = setTimeout( handler, cfg.interval );
        }
    }
    var timeout = setTimeout( handler, cfg.interval );
    target.mousemove( track ).mouseout( clear );
    return true;
    }
};