How to set the stop time on hover?

Question

Here is the code that I want to change:

$("#header_nav").mouseenter(function(){
            $('#header_nav').stop().animate({
                height:'50px'
            },600); 
});


$("#header_nav").mouseleave(function(){
            $('#header_nav').stop().animate({
                height:'100px'
            },600);
});

http://jsfiddle.net/JJ8Jc/318/

Question: How to set the stop time (the time when the area is not responding if you hover on it)?

Thank you.

Answer 1

It's not clear what you mean by "stop time", but I would guess that you mean that you don't want the animation to begin until after the mouse has hovered over the element for at least some minimum amount of time, say 500ms. If so then you can use the .delay() method, and call .stop() with the true argument to clear any animations in the queue:

$("#header_nav").mouseenter(function(){
        $(this).stop(true).delay(500).animate({
            height:'50px'
        },600); 
}).mouseleave(function(){
        $(this).stop(true).animate({
            height:'100px'
        },600);
});

Updated version of demo: http://jsfiddle.net/JJ8Jc/321/