jQuery activate a mouseover function only if the mouse holds on the element

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

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.