javascript - Possible to have "mouseover for X seconds" functionality using jQuery? - Stack Overflow

admin管理员组

文章数量:1392054

I currently have several elements in a row that have a mouseover event that fires some animation. My problem is that if someone mouses over several of the elements in quick succession the animation gets a little frantic.

I'm curious if there is a way to have a mouseover event that only fires if the mouse is over an element for a certain amount of time (say 250 milliseconds). Can this be done with jQuery?

I currently have several elements in a row that have a mouseover event that fires some animation. My problem is that if someone mouses over several of the elements in quick succession the animation gets a little frantic.

I'm curious if there is a way to have a mouseover event that only fires if the mouse is over an element for a certain amount of time (say 250 milliseconds). Can this be done with jQuery?

• javascript
• jquery

Share Improve this question Follow asked Aug 17, 2011 at 21:49 Abe MiesslerAbe Miessler 85.2k104104 gold badges321321 silver badges495495 bronze badges 3

• stop() can be an alternative and you're not constrained to download any plug-ins, have a look at it (api.jquery./stop) – vdegenne Commented Aug 17, 2011 at 21:56
• How would I use stop to do this? – Abe Miessler Commented Aug 17, 2011 at 22:03
• edit your post and stamp the code that handle elements' event, I'll see if you can use this in your code and will post an example as an answer to your trouble. – vdegenne Commented Aug 17, 2011 at 22:09

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

I would suggest you use setTimeout for this:

(function ($) {
    var t;
    $('ul li').hover(function() {
        var that = this;
        window.clearTimeout(t);
        t = window.setTimeout(function () {
            $(that).animate({opacity: .5}, 'slow').animate({opacity: 1});
          }, 250);
    });
}(jQuery));

If there are multiple items activated in rapid succession the timeout will override the timeout-id thus preventing the first item that should not start from animating.

It does not require any arcane plugin (although hoverIntent may provide some nice additional features you may want to use) and window.setTimeout is supported everywhere.

UPDATE

I updated the code sample to work.. was writing this from memory yesterday and didn't get the setTimeout call quite right.. Also see this jsFiddle for reference.

The issue I see with this is that it will execute the hover animation even if you leave the . So you could also add a $('ul').mouseleave(function() { window.clearTimeout(t) }); to prevent that.

greetings Daniel

I suggest that you check out the jQuery HoverIntent plugin ( 1.4k minified ). Here's the link: http://cherne/brian/resources/jquery.hoverIntent.html. It's a great plugin, I've used it many times!

Here's a small sampling of code:

var config = {    
     over: makeTall, // function = onMouseOver callback (REQUIRED)    
     timeout: 500, // number = milliseconds delay before onMouseOut    
     out: makeShort // function = onMouseOut callback (REQUIRED)    
};

$("#demo3 li").hoverIntent( config )

yes: to acplish this put a setTimeout in your onMouseover function and a clearTimeout on mouseout

You may need a little more logic, but that's the nuts and bolts of it

here's an example of stop() in action, hope that will help:

without stop():

http://jsfiddle/5djzM/

with stop() cleaning the queue of animations:

http://jsfiddle/KjybD/

本文标签： javascriptPossible to have quotmouseover for X secondsquot functionality using jQueryStack Overflow