CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
tokoma
tokoma

Reputation: 23

How to delay jquery hover event

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.com/lXioubaMre

Upvotes: 2

Views: 3013

Answers (4)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

You could use a basic CSS transition

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

that runs immediately after a 600ms delay

Example: http://www.bootply.com/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

Upvotes: 4

Ronen Cypis
Ronen Cypis

Reputation: 21470

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'});  
  }
});

Upvotes: 1

skobaljic
skobaljic

Reputation: 9614

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
});

Upvotes: 1

cнŝdk
cнŝdk

Reputation: 32145

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.com/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.

Upvotes: 0

Related Questions