delayed hover/mouseover effect on jquery/javascript

[jay K.]

Hello,

I'd like to delayed onmouseenter or hover effect on an element

So far my code looks like this

//BEGINNING OF CODE

$("#element").mouseenter(function(){

//wait for 3 seconds
executeFuncion();

}).mouseleave(function(){

});

//END

What I want to do is to get the event triggered by the onmouseover
effect to happen 3 seconds after the user has put the cursor on the
desired element. The counter should be re initialized to 0 if the user
takes the cursor away from the element, say in 2 seconds, so when the
user puts the cursor back to the element again, the counter starts
from 0 (and not from 2)

Thanks

regards,

jay k

 

[Stanimir Stamenkov]

Fri, 29 Jul 2011 11:36:33 -0700 (PDT), /jay K./:

I'd like to delayed onmouseenter or hover effect on an element

So far my code looks like this

//BEGINNING OF CODE

$("#element").mouseenter(function(){

//wait for 3 seconds
executeFuncion();

}).mouseleave(function(){

});

//END

What I want to do is to get the event triggered by the onmouseover
effect to happen 3 seconds after the user has put the cursor on the
desired element. The counter should be re initialized to 0 if the user
takes the cursor away from the element, say in 2 seconds, so when the
user puts the cursor back to the element again, the counter starts
from 0 (and not from 2)

You should explicitly state you're using jQuery (right?), otherwise
your code doesn't make much sense. Try:

function executeFuncion() {
// Do what you wanna do.
}

var delayId;

function clearDelay() {
if (delayId) {
window.clearTimeout(delayId);
delayId = null;
}
}

$("#element").mouseenter(function () {
clearDelay();
delayId = window.setTimeout(executeFuncion, 3000);
}).mouseleave(clearDelay);