javascript - How to delay jquery hover event - Stack Overflow

admin管理员组

文章数量:1022804

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

Share Improve this question Follow edited Mar 5, 2015 at 20:43 amphetamachine 30.7k1212 gold badges6868 silver badges7474 bronze badges asked Jan 23, 2015 at 9:01 tokomatokoma 2311 silver badge44 bronze badges 2

• 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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.

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

Share Improve this question Follow edited Mar 5, 2015 at 20:43 amphetamachine 30.7k1212 gold badges6868 silver badges7474 bronze badges asked Jan 23, 2015 at 9:01 tokomatokoma 2311 silver badge44 bronze badges 2

• 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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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.

本文标签： javascriptHow to delay jquery hover eventStack Overflow