如何添加延迟CSS垂直下拉菜单(How to add a delay to CSS Vertical

我需要一个延迟添加到我的下拉菜单中的鼠标悬停事件，因此，如果有人将鼠标移动到菜单将页面上的其他链接菜单会降不下来瞬间。谢谢你的帮助。

http://jsfiddle.net/cgagliardi/NPVVQ/

Answer 1:

您可以添加setTimeout()延迟show()并在悬停了明确的超时，这样，如果用户移动鼠标移出之前的延迟涨它就会被取消。你可以封装在自己的jQuery插件：

jQuery.fn.hoverWithDelay = function(inCallback,outCallback,delay) {
    this.each(function(i,el) {
        var timer;
        $(this).hover(function(){
           timer = setTimeout(function(){
              timer = null;
              inCallback.call(el);
           }, delay);
        },function() {
           if (timer) {
              clearTimeout(timer);
              timer = null;
           } else
              outCallback.call(el);
        });
    });
};

您可以使用这样的：

$('ul.top-level li').hoverWithDelay(function() {
    $(this).find('ul').show();
}, function() {
    $(this).find('ul').fadeOut('fast', closeMenuIfOut);
}, 500);

我的鹅卵石，在匆忙在一起插件，所以我敢肯定，它可以改进，但它似乎在您的演示的这个更新版本的工作： http://jsfiddle.net/NPVVQ/3/

至于解释我的代码是如何工作的：对.each()通过jQuery对象中的函数调用上的所有元素循环。对于使用悬停处理程序创建的每个元素setTimeout()延迟调用提供的回调函数-如果说之前的时间到了此超时将被清除，以便发生鼠标离开inCallback不叫。所述.call()方法被用在inCallback和outCallback设定为正确值的this 。