Solved

mouseenter with delay jquery

Posted on 2014-03-13
4
570 Views
Last Modified: 2014-03-13
Hi,

I want to use the mouseenter in jquery but only occurs if the mouse stay entered in a element , in my case a td, for more than 3 seconds, my problem is that occurs inmediately after the mouse enters over the td, any idea?
0
Comment
Question by:joyacv2
4 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39927582
Suggest you look at the hoverintent plugin
http://cherne.net/brian/resources/jquery.hoverIntent.html

Saves messing around with timeouts
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39927674
No points for this comment, please, but I'd just like to vote up the use of something like this with a little delay.  It has to be one of the smarter UX designs I've seen in a long time.  It's amazingly annoying when you have to move the mouse over a piece of the navigation and all the flyouts jump all over the screen.  With hoverIntent, it looks like you can give the client a break from all that.  Great suggestion!
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39927708
With your own timer : http://jsfiddle.net/XmsBc/

var _in = function() {
    var dis = this;
    var t = setTimeout(function() {
                $(dis).removeData("timer");
                $(dis).addClass("active")
    }, 3000);
    $(this).data("timer",t);
}

var _ot = function() {
    if($(this).data("timer")) {
        clearInterval($(this).data("timer"));
        $(this).removeData("timer");
    }
    $(this).removeClass("active")
}

$("td").hover(_in,_ot);

Open in new window

0
 
LVL 1

Author Closing Comment

by:joyacv2
ID: 39927733
perfect!!!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

These days socially coordinated efforts have turned into a critical requirement for enterprises.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to count occurrences of each item in an array.

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question