Trigger if continously hover for certain time

Question

I need to trigger a method when a hover is made on a button for continous 1000 ms. Whenever hover is on other elements then timeout should be reset. How do I implement such thing using javascript/ jquery ?

Preferred solution would be one not requiring use of new plugin.

Have you tried anything yet ? – Mohammad Adil May 08 '13 at 10:37 — Mohammad Adil, May 08 '13 at 10:37

Arun P Johny · Accepted Answer · 2013-05-08T12:54:09.630

6

Try

$(function(){
    var timer;

    $('.item').hover(function(){
        timer = setTimeout(function(){
            console.log('do it')
        },  1000);
    }, function(){
        clearTimeout(timer);
    });
})

Update:

$(function(){
    $('body').on('mouseenter', '.item', function(e){
        var timer = setTimeout(function(){
            console.log('do it', e.target)
        },  1000);
        $(this).data('myTimer', timer);
    }).on('mouseleave', '.item', function(e){
        clearTimeout($(this).data('myTimer'));
    });
})

Demo: Fiddle

edited May 08 '13 at 12:54

answered May 08 '13 at 10:41

Arun P Johny

376,738
64
519
520

i use `'hover'` with `.live()` or `.on()` to apply to elements that match selector in future. could you please tell how to modify your solution to use with `.on()` – Rajat Gupta May 08 '13 at 12:30
`hover` is not an event, you need to use `mouseenter` and `mouseleave` – Arun P Johny May 08 '13 at 12:36
1

@user01 see the update – Arun P Johny May 08 '13 at 12:54

Trigger if continously hover for certain time

1 Answers1