Delay jquery hover event?

I would like to delay a hover event in jquery. I am reading from a file when user hovers over a link or label. I don't want this event to occur immediately in case the user is just moving the mouse across the screen. Is there a way to delay the event from firing?

Thank you.

Example code:

$(function() {
    $('#container a').hover(function() {
        $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
            {filename:'file.txt'},
            function() {
                $(this).appendTo('#info');
            }
         );
    },
        function() { $('#info').remove(); }
    });
});

UPDATE: (1/14/09) After adding the HoverIntent plugin the above code was changed to the following to implement it. Very simple to implement.

$(function() {
    hiConfig = {
        sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
        interval: 200, // number = milliseconds for onMouseOver polling interval
        timeout: 200, // number = milliseconds delay before onMouseOut
        over: function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
                function() {
                   $(this).appendTo('#info');
                }
             );
        }, // function = onMouseOver callback (REQUIRED)
        out: function() { $('#info').remove();  } // function = onMouseOut callback (REQUIRED)
    }
    $('#container a').hoverIntent(hiConfig)
}

---

Use the hoverIntent plugin for jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html

It's absolutely perfect for what you describe and I've used it on nearly every project that required mouseover activation of menus etc...

There is one gotcha to this approach, some interfaces are devoid of a 'hover' state eg. mobile browsers like safari on the iphone. You may be hiding an important part of the interface or navigation with no way to open it on such a device. You could get round this with device specific CSS.

---

You need to check a timer on hover. If it does not exist (ie this is the first hover), create it. If it exists (ie this is not the first hover), kill it and restart it. Set the timer payload to your code.

$(function() {
    var timer;

    $('#container a').hover(function() {
        if(timer) {
            clearTimeout(timer);
            timer = null
        }
        timer = setTimeout(function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
                {filename:'file.txt'},
                function() {
                    $(this).appendTo('#info');
                }
            );
        }, 500)
    },
    // mouse out
    });
});

I bet jQuery has a function that wraps this all up for you.

Edit: Ah yes, jQuery plugin to the rescue

---

Totally agree that hoverIntent is the best solution, but if you happen to be an unfortunate sod who works on a website with a long and protracted process for approval of jQuery plugins, here's a quick and dirty solution which worked well for me:

$('li.contracted').hover(function () {
    var expanding = $(this);
    var timer = window.setTimeout(function () {
        expanding.data('timerid', null);

            ... do stuff

    }, 300);
    //store ID of newly created timer in DOM object
    expanding.data('timerid', timer);
}, function () {
    var timerid = $(this).data('timerid');
    if (timerid != null) {
        //mouse out, didn't timeout. Kill previously started timer
        window.clearTimeout(timerid);
    }
});

This one's just for expanding an <li> if the mouse has been on it for longer than 300ms.

链接地址: http://www.djcxy.com/p/39540.html

上一篇: 简单登录到应用程序

下一篇: 延迟jquery悬停事件？