Question

我有一个包含类别的菜单当我在一个类别上盘旋时，下拉显示出来（我已经将下降延迟到600 MS之后出现），

我想知道如何延迟600 MS的类别上的悬停事件，使用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);
});

我在这里做了一个bootply http://www.bootply.com/lXioubaMre

Answer 1

您可以使用基本的CSS3过渡

.services-shortcut {
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s;
    -webkit-transition-delay: 0.6s; 
    -moz-transition-delay: 0.6s; 
    transition-delay: 0.6s;
}

在600ms延迟

之后立即运行

示例：http://www.bootply.com/xppQzbvQ3P

如果您选择在javascript中完全执行此效果（但我不会这样做，只是为了避免javascript的样式），然后在active超时后应用600ms类，例如

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

如果您使用此方法，则还应清除间隔onmouseout

Answer 2

您可以使用hoverIntent jQuery插件，该插件根据客户端鼠标移动触发功能。在您的情况下，脚本很简单，您可以查看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
});

Answer 3

您只需使用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>

在执行您的操作之前，这将等待600ms，这就是您所需要的一切。

Answer 4

我会使用$.hoverDelay() plugin来做到这一点。它允许您配置'in'和'out'事件的延迟，如下所示：

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

如何延迟jquery悬停事件

4 个答案: