Implement a short pause before jquery animation

Question

Im writing a simple jquery menu system that shows / hides a DIV on mouse over a text link.

I want to implement a short pause before the slide happens, so that the menue doesnt drop down if the mouse just flies over the menu link.

this is how i currently activate the menu:

<script type="text/javascript"><!--
$('#aboutLink').mouseover(function() {$('#aboutMenu1').slideDown('fast');
$('#aboutLink').css("color", "#ff297b");});
 --></script>

So in effect what i need to do is on mouseover, wait say 300ms, then, IF the mouse is STILL over the link, do the animation.

Duplicate of [Is there a way to only act on a mouse over after x milliseconds and only if it stays moused over?](http://stackoverflow.com/questions/8948648/is-there-a-way-to-only-act-on-a-mouse-over-after-x-milliseconds-and-only-if-it-s). — Felix Kling, May 23 '12 at 10:31

score 1 · Answer 1 · answered May 23 '12 at 10:28

I would suggest using hoverIntent: http://cherne.net/brian/resources/jquery.hoverIntent.html

var config = {    
     sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
     interval: 200, // number = milliseconds for onMouseOver polling interval    
     timeout: 500, // number = milliseconds delay before onMouseOut    
};

$(document).ready(function(){
  $('ul#menu > li').hoverIntent(
    // mouseover
    function(){
      $(this).find('>ul').fadeIn('fast');
    },
    // mouseout
    function(){
       $(this).find('>ul').fadeOut('fast');
    }  
  );
});

score 1 · Accepted Answer · answered May 23 '12 at 10:29

You probably want to do something like that:

var timeout;

$('#aboutLink').mouseover(function() {
    timeout = window.setTimeout(function() {
        $('#aboutMenu1').slideDown('fast');
        $('#aboutLink').css("color", "#ff297b");
    }, 300);
});

$('#aboutLink').mouseout(function() {
    if(timeout) {
        window.clearTimeout(timeout);
    }
});

First you set the timeout, that will execute the given function after 300ms, but if the user leaves the div the timeout is cleared and nothing will happen.

score 0 · Answer 3 · answered May 23 '12 at 10:28

0

<script type="text/javascript"><!--
var timeout;
var delay = 300;

$('#aboutLink').hover(function() {
    timeout = setTimeout(function(){
       $('#aboutMenu1').slideDown('fast');
    }, delay);
}, function(){
   if(timeout) clearTimeout(timeout);
});
$('#aboutLink').css("color", "#ff297b");});
--></script>

answered May 23 '12 at 10:28

ahren

16,803
5
50
70

This will always trigger, even if the mouse is removed in the 300ms interval. – Johan May 23 '12 at 10:29
@Johan - yeah i noticed that error after I posted. Fixed now. – ahren May 23 '12 at 10:32

score 0 · Answer 4 · answered May 23 '12 at 10:34

Use window.setTimeout

Also, I would recommend the mouse events mouseleave and mouseenter (See http://api.jquery.com/mouseenter/). Saves you the hassle of dealing with nested elements

Then you have

var timeoutId;

$(...).mouseleave(function (ev) { 
    if (timeoutId) { 
        window.clearTimeout(timeoutId);  
    }
    else {
        // either remove the menu or set a similar timeout for disappearance
    }
});

$(...).mouseenter(function (ev) { 
    if (timeoutId) { 
        // clear pending timeouts for other menu items
        window.clearTimeout(timeoutId); 
    }
    else {
        // either remove other menus or transition them out
    }

    timeoutId = window.setTimeout(function () {
        // show menu
    }, 300); 
});

Doing it like this leaves you with a simple logic, since you are always looking at the current element. By clearing any timeout on mouseenter you don't have to take care of the other elements.

You can of course muck around and have timeouts for each individual menu entry - giving you nicer transitions. But you'll have to manage more complexity.

Implement a short pause before jquery animation

4 Answers4