CODEWITHSUNDEEP
javascriptjquerycss
Mali
Mali

Reputation: 131

jQuery mouseover with timing

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);

});

Upvotes: 1

Views: 138

Answers (5)

Esailija
Esailija

Reputation: 140210

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);
        }

    };
}());​

Upvotes: 3

Okan Kocyigit
Okan Kocyigit

Reputation: 13421

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

DEMO

Upvotes: 1

Arcadien
Arcadien

Reputation: 2278

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

Upvotes: 0

Nishu Tayal
Nishu Tayal

Reputation: 20820

You should use setTimeOut function.

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

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

});
},1000);

It takes time in milliseconds.

Upvotes: 0

Marc
Marc

Reputation: 571

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.

Upvotes: 2

Related Questions