在悬停时添加延迟 - 菜单jquery

时间:2015-06-04 06:01:23

标签: javascript jquery css

我的问题是:如果您从 2014年到12月并且鼠标通过超过2015年,则年份会更改到2015.I需要添加一个小延迟,以便保持为2014年

这里是jsfiddle demo demo link 注意:将鼠标悬停在Past Events

$(".dropdown-menu > li > a.trigger").on("mouseover",function(e){
    var current=$('.dropdown-menu > li > a.trigger').next();
    var grandparent=$('.dropdown-menu > li > a.trigger').parent().parent();
    if($('.dropdown-menu > li > a.trigger').hasClass('left-caret')||$('.dropdown-menu > li > a.trigger').hasClass('right-caret'))
        $('.dropdown-menu > li > a.trigger').toggleClass('right-caret left-caret');
        grandparent.find('.left-caret').toggleClass('right-caret left-caret');
        grandparent.find(".sub-menu:visible").hide();
        current.fadeIn(200);
    e.stopPropagation();
});

2 个答案:

答案 0 :(得分:1)

尝试这些方法。

var selected = null;
var queued = null;
$(".dropdown-menu > li > a.trigger").on("mouseover", function (e) {
    if (selected !== this) {
        addQueue(this);
    } else {
        // the rest of your code!
    }
});

function addQueue($el) {
    queued = $el;
    setTimeout(function () {
        if (queued === $el) {
            selected = $el;
            $el.trigger('mouseover');
        }
    }, 500);
}

答案 1 :(得分:0)

最简单的实现可能是使用名为HoverIntent

的jQuery插件

http://cherne.net/brian/resources/jquery.hoverIntent.html

你的JS就是:

$(".dropdown-menu > li > a.trigger").hoverIntent(function(e){
    // Do Stuff...
});

这样,只有当用户以足够慢的鼠标速度悬停在元素上足够长时间时,侦听器才会触发。