I have a menu with categories, when I hover on a category a drop down show up (I have already delayed the drop down to show up after 600 MS),

I want to know how to delay the hover event on the category too for 600 MS, What is the best way and easiest way to achieve this using jquery?

jQuery('div.dropdown').hover(function() {
    jQuery(this).find('.services-shortcut').addClass('active');
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, function() {
    jQuery(this).find('.services-shortcut').removeClass('active');
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeOut(0);
});

I have made a bootply here

I have a menu with categories, when I hover on a category a drop down show up (I have already delayed the drop down to show up after 600 MS),

I want to know how to delay the hover event on the category too for 600 MS, What is the best way and easiest way to achieve this using jquery?

jQuery('div.dropdown').hover(function() {
    jQuery(this).find('.services-shortcut').addClass('active');
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, function() {
    jQuery(this).find('.services-shortcut').removeClass('active');
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeOut(0);
});

I have made a bootply here http://www.bootply./lXioubaMre

• javascript
• jquery
• html
• css
• twitter-bootstrap

• This plugin may be best for you. Look at demos below. – skobaljic Commented Jan 23, 2015 at 9:04
• Is there any easy way to achieve it without a plugin? – tokoma Commented Jan 23, 2015 at 9:06

4 Answers 4

You could use a basic CSS transition

.services-shortcut {
    transition: all 0s .6s;
}

that runs immediately after a 600ms delay

Example: http://www.bootply./xppQzbvQ3P

If you choose to do this effect absolutely in javascript (but I wouldn't do it, just to keep off style from javascript) then apply the active class after a 600ms timeout, e.g.

jQuery('div.dropdown').hover(function() {
    var $this = $(this);
    setTimeout(function() {
        $this.find('.services-shortcut').addClass('active');
    }, 600);
    $this.find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, ...

If you use this approach then you should also clear the interval onmouseout

You can use hoverIntent jQuery plugin, which triggers functions based on client mouse movement. In your case the script would be simple, you can take a look at this Bootply:

function showMenu(e) {
    jQuery(this).find('.services-shortcut').addClass('active');
    jQuery(this).find('.dropdown-menu').show();
};
function hideMenu(e) {
    jQuery(this).find('.services-shortcut').removeClass('active');
    jQuery(this).find('.dropdown-menu').hide();
};

$("div.dropdown").hoverIntent({
    over: showMenu,
    out: hideMenu,
    sensitivity: 3,
    timeout: 800
});

$(".dropdown-menu a").hoverIntent({
    over: function(){
        $(this).addClass('active')
    },
    out: function(){
        $(this).removeClass('active')
    },
    sensitivity: 3
});

I would use $.hoverDelay() plugin that does exactly that. It lets you configure the delay(s) for the 'in' and 'out' events like so:

$('div.dropdown').hoverDelay({
  delayIn: 200,
  delayOut:700,
  handlerIn: function($element){
    $element.css({backgroundColor: 'red'});  
  },
  handlerOut: function($element){
    $element.css({backgroundColor: 'auto'});  
  }
});

You can simply use jQuery.delay() method :

jQuery('div.dropdown').hover(function() {
  alert("Action delayed");
    jQuery(this).find('.services-shortcut').addClass('active');
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, function() {
    jQuery(this).find('.services-shortcut').removeClass('active');
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeOut(0);
}).delay(600);

.dropdown{
  background-color:red;
]

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="dropdown">
  aaaa
  </div>

That will wait for 600ms before executing your action, that's all you need.