jQuery mouseover with timing

Question

Is there a way to trigger a mouseover event only after the mouse was hovering for 1 sec on an element?

$("img").mouseover(function () {

 $(this).animate( {opacity:1}, 200);

});

You might want to look at http://cherne.net/brian/resources/jquery.hoverIntent.html — j08691, Jun 18 '12 at 17:14
Check the following link [Tricky delay on mouseover](http://stackoverflow.com/questions/1510594/tricky-delay-on-mouseover) — Aleksey Cherenkov, Jun 18 '12 at 17:17

score 3 · Answer 1 · answered Jun 18 '12 at 17:22

3

http://jsfiddle.net/tqa2J/1/

$("img").on("mouseover mouseout", function() {
    var tid = 0;
    return function(e) {
        var elem = $(this);
        clearTimeout(tid);
        if (e.type == "mouseover") {
            tid = setTimeout(function() {
                elem.stop(true).animate({
                    opacity: 1
                }, 200);
            }, 1000);
        }
        else {
            console.log(elem);
            elem.stop(true).animate({
                opacity: 0.3
            }, 200);
        }

    };
}());

answered Jun 18 '12 at 17:22

Esailija

138,174
23
272
326

It should be noted: hoverIntent is ~1.5kb of code (minified) this solution is like 0.01kb as is. – rlemon Jun 18 '12 at 17:28
@rlemon this also has debugging module built-in `console.log(elem);` – Esailija Jun 18 '12 at 17:28

score 2 · Answer 2 · answered Jun 18 '12 at 17:16

2

You can use the hoverIntent() jQuery plugin found here: http://cherne.net/brian/resources/jquery.hoverIntent.html

Also, make sure you be careful when using these kinds of things as they do not work on mobile browsers or anything using a touch screen.

answered Jun 18 '12 at 17:16

Marc

561
5
17

Yeah, unless the touch screen app has a built-in mouse pointer or equivalent that can be detected as a hover event. – Dexter Huinda Jun 18 '12 at 17:24

score 1 · Accepted Answer · answered Jun 18 '12 at 17:21

1

$("img").mouseover(function () {
    $(this).delay(1000).animate( {opacity:1}, 200);
}).mouseleave(function() {
    $(this).clearQueue().stop().animate({opacity:0.2},200);
});

DEMO

answered Jun 18 '12 at 17:21

Okan Kocyigit

13,203
18
70
129

score 0 · Answer 4 · answered Jun 18 '12 at 17:17

0

You should use setTimeOut function.

setTimeOut(function(){$("img").mouseover(function () {

        $(this).animate( {opacity:1}, 200);

});
},1000);

It takes time in milliseconds.

answered Jun 18 '12 at 17:17

Nishu Tayal

20,106
8
49
101

score 0 · Answer 5 · answered Jun 18 '12 at 17:19

you can create a timer function (see [1]) that processes your event 1s later. You can store that function in an array or directly to "window", to let it be cancelable if "mouseout" occurs before the timer function triggers.

[1] http://www.w3schools.com/js/js_timing.asp

jQuery mouseover with timing

5 Answers5