在悬停上添加延迟-菜单jQuery

Question

My problem is: If you go from 2014 to Dec and the mouse passes over 2015 , then the year changes to 2015.I need to add a small delay so the year stays as 2014 .

here the jsfiddle demo demo link Note: hover on 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();
});

Answer 1

Try something along these lines.

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

Answer 2

The easiest implementation may be to use a jQuery plugin called HoverIntent

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

Your JS would just be:

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

This way, the listener would only fire when the user hovers over the element for long enough at a slow enough mouse speed.