jQuery: Delay a mouseenter event (dropdown menu)

Question

I'm working on this fiddle: http://jsfiddle.net/8n2TQ/9/

It consists of a rollover button which drops down a menu like so:

$('#one').mouseenter(function() {

    //Slide down

});

The event happens immediately on hover, but I want to put in a small delay to prevent accidental hovers from triggering the event. I tried to work with a timer (see http://jsfiddle.net/8n2TQ/13/) but that doesn't seem to execute all the events under '//Slide up'. I guess I'm missing something here, what am I doing wrong?

Check out hoverIntent: cherne.net/brian/resources/jquery.hoverIntent.html — elclanrs
– elclanrs, Commented Dec 12, 2012 at 22:31
I came across the plugin but can it handle custom functions? If so how? — kapoko
– kapoko, Commented Dec 12, 2012 at 22:34

superUntitled · Accepted Answer · 2012-12-12 22:32:52Z

3

https://github.com/briancherne/jquery-hoverIntent

There is a plugin for this that works well.

answered Dec 12, 2012 at 22:32

superUntitled

22.6k30 gold badges86 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gilles Hemmerlé · Accepted Answer · 2012-12-12 23:15:11Z

2

You asked how to handle function. There is an example on thé plugin page

var config = {    
     over: makeTall, // function = onMouseOver callback (REQUIRED)    
     timeout: 500, // number = milliseconds delay before onMouseOut    
     out: makeShort // function = onMouseOut callback (REQUIRED)    
};

$("#demo3 li").hoverIntent( config )

edited Dec 12, 2012 at 23:15

answered Dec 12, 2012 at 22:38

Gilles Hemmerlé

5373 silver badges10 bronze badges

Collectives™ on Stack Overflow

jQuery: Delay a mouseenter event (dropdown menu)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related