views:

399

answers:

3

Hi, I would like to activate a .mouseover function only if the mouse lays down on the "trigger" element for a predetermined duration (e.g. 500 milliseconds).

E.g.

$('.featured').mouseover(function () { $('.feat-txt').fadeOut("fast"); });

Only if the mouse is positioned over the .featured element for at least 500 milliseconds period, the function can start and .feat-txt can FadeOut. A simple mouse over (just a quick movement) on that element doesn't activate the function.

Any suggestion on how to do that?

+6  A: 

I have used hover intent in the past - pretty good and does what you're after I think:

http://cherne.net/brian/resources/jquery.hoverIntent.html

Paul
Great hint Paul. Thank you very much!
Cybermac
A: 

Do it like this:

  • Intercept onmouseover events on that element. In the callback function don't do anything; instead call another function with the delay you want, e.g. in prototype you do it with functionName.delay(500)

  • In the second function check if the mouse is still on the element using whatever jQuery gives you to get the mouse coordinates and the element coordinates. If the mouse is still there, do whatever you wanted to do.

This will not work for long delays because the user could move the mouse outside and back inside the element and functionName will still fire.

If you don't mind me saying it, this is a very bad idea.

Kaze no Koe
It's a good hint but seems to be a little tricky.
Cybermac
It's not too tricky really, but the answer that points you to "hover intent" is better anyway because it's already implemented, it plugs into jQuery which you already use and probably already works better than the solution I'm proposing
Kaze no Koe
A: 

Actually, I found also this jquery hover plugin. http://blog.threedubmedia.com/2008/08/eventspecialhover.html

It doesn't use the mouseover wait duration, but uses mouse speed in a specific time frame.

The result can be seen on the three boxes displayed on the right side of this page: http://www.splendida.it (I'm currently working on it).

It looks nice to me. When the mouse jumps quickly from the first to the third box, nothing happens, even if the mouse passes over the second element.

Cybermac