delayed hover/mouseover effect on jquery/javascript

Discussion in 'Javascript' started by jay K., Jul 29, 2011.

  1. jay K.

    jay K. Guest

    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
     
    jay K., Jul 29, 2011
    #1
    1. Advertisements

  2. Fri, 29 Jul 2011 11:36:33 -0700 (PDT), /jay K./:
    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);
     
    Stanimir Stamenkov, Jul 29, 2011
    #2
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.